Html Question posted in
Some basic documentation can be found here.

Html – How do I fill in the spaces between the column title with a color background?

I made a table with a color on the top row and there are some white spaces in between the columns. Is there any way I could get rid of them and fill them in with my color? This is my output: Output This is my code:

<table style="width:100%;">
  <tr style="background-color:#820000;color:white;font-family:sans-serif;">
    <td style="width:6%">
      Item #
    </td>
    <td style="width:75%">
      Description
    </td>
    <td style="width:8%">
      Quantity
    </td>
    <td style="width:7%">
      Price
    </td>
    <td style="width:4%">
      Cost
    </td>
  </tr>
</table>
Tags:

3

Answers


  1. 0

    You can achieve this with the border-collapse: collapse rule on the <table>.

    <table style="width:100%;border-collapse:collapse">
  <tr style="background-color:#820000;color:white;font-family:sans-serif;">
    <td style="width:6%">
      Item #
    </td>
    <td style="width:75%">
      Description
    </td>
    <td style="width:8%">
      Quantity
    </td>
    <td style="width:7%">
      Price
    </td>
    <td style="width:4%">
      Cost
    </td>
  </tr>
</table>

    I recommend overhauling this to make it more dynamic:

    :root {
  --table-theme-primary-color: #820000;
  --table-theme-secondary-color: #FFF7F7;
  --table-theme-accent-color: #FDD;
}

.awesome-table {
  width: 100%;
  border: var(--table-theme-primary-color) thin solid;
  border-collapse: collapse;
}

.awesome-table th, .awesome-table td {
  padding: 0.25rem 0.5rem;
}

.awesome-table th {
  color: var(--table-theme-secondary-color);
  font-family: sans-serif;
}

.awesome-table td {
  color: var(--table-theme-primary-color);
}

.awesome-table thead tr {
  background-color: var(--table-theme-primary-color);
}

.awesome-table tbody tr {
  background-color: var(--table-theme-secondary-color);
}

.awesome-table tbody tr:nth-child(even) {
  background-color: var(--table-theme-accent-color);
}

    <table class="awesome-table">
  <thead>
    <tr>
      <th>Item #</th>
      <th style="width:75%">Description</th>
      <th>Quantity</th>
      <th>Price</th>
      <th>Cost</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>00000001</td>
      <td>Item A</td>
      <td>100</td>
      <td>$1.00</td>
      <td>$0.10</td>
    </tr>
    <tr>
      <td>00000002</td>
      <td>Item B</td>
      <td>50</td>
      <td>$10.00</td>
      <td>$0.80</td>
    </tr>
    <tr>
      <td>00000003</td>
      <td>Item C</td>
      <td>10</td>
      <td>$100.00</td>
      <td>$2.00</td>
    </tr>
  </tbody>
</table>
    Login or Signup to reply.
  2. 0

    To eliminate the white spaces between the columns in your table and ensure that the background color extends across the entire row, you can adjust your table’s CSS. Specifically, you want to remove any padding and margin from the table cells. Here’s how you can modify your code:

        <table style="width:100%; border-collapse: collapse;">
  <tr style="background-color:#820000; color:white; font-family:sans-serif;">
    <td style="width:6%; padding: 8px; margin: 0;">
      Item #
    </td>
    <td style="width:75%; padding: 8px; margin: 0;">
      Description
    </td>
    <td style="width:8%; padding: 8px; margin: 0;">
      Quantity
    </td>
    <td style="width:7%; padding: 8px; margin: 0;">
      Price
    </td>
    <td style="width:4%; padding: 8px; margin: 0;">
      Cost
    </td>
  </tr>
</table>
    Login or Signup to reply.
  3. 0

    By default browser stylesheet, table element has border-spacing that gives each <td> space.

    To get rid of the space, you can easily add the table element border-spacing:0;

    <table style="width:100%;border-spacing:0;">
...
</table>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search