Home > Back-end >  Increase space between specific columns in HTML table
Increase space between specific columns in HTML table

Time:05-02

How do I increase the white space here between Column B and Column C (but not Column A and Column B)? I'm after something that will let me target a column very specifically, so I probably want inline CSS.

<html>

<style>
  th {
    background-color: #D8D8D8;
  }
</style>

<table>
  <tr>
    <th>Column A</th>
    <th>Column B</th>
    <th>Column C</th>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>

</html>

CodePudding user response:

<style>
   td,
   th {
       border: 1px solid rgb(190, 190, 190);
       padding: 10px;
      }

   td {
       text-align: center;
      }

   tr:nth-child(even) {
                        background-color: #eee;
                      }

   th[scope=col] {
        background-color: #696969;
        color: #fff;
                 }
   table {
           border-collapse: collapse;
           border: 2px solid rgb(200, 200, 200);
           letter-spacing: 1px;
           font-family: sans-serif;
           font-size: .8rem;
        }

 </style>
 <table>

<tr>
     <th scope="col">Column A</th>
     <th scope="col">Column B</th>
     <th scope="col">Column C</th>
</tr>
<tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
</tr>
<tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
</tr>

</table>

CodePudding user response:

   <style>
       th{
          background-color: #D8D8D8;
          }
        td,
         th {

             padding: 10px;
            }

          td {
             text-align: center;
             }
        table {
           letter-spacing: 1px;
           font-family: sans-serif;
           font-size: .8rem;
          }

    </style>
   <table>

    <tr>
     <th>Column A</th>
     <th>Column B</th>
     <th style="width: 0.1rem;background:none !important;"></th>
     <th>Column C</th>
     </tr>
    <tr>
      <td>1</td>
      <td >2</td>
      <th style="width: 0.1rem;background:none !important;"></th>
      <td >3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <th style="width: 0.1rem;background:none !important;"></th>
      <td>3</td>
     </tr>

  </table>
  • Related