CODEWITHSUNDEEP
htmlcsshtml-table
stramin
stramin

Reputation: 2390

show a border in table rows when there is not td

I have a table with different number of <td>, something like this:

<table>
    <tbody><tr><td>1</td><td>2</td><td>3</td><td>4</td>
    </tr></tbody>
    <tbody><tr><td>1</td>
    </tr></tbody>
    <tbody><tr><td>1</td><td>2</td>
    </tr></tbody>
    <tbody><tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td>
    </tr></tbody>
</table>

I want to draw a line under every row, I tried these styles:

table{border-collapse: collapse;empty-cells: show;}
tbody{border-bottom:1px solid #000;}
tr{border-bottom:1px solid #000;}
td{border-bottom:1px solid #000;}

This is what I get:

enter image description here

Lines are not reaching the end of the table, this is the expected result:

enter image description here

Is this possible using css only?

table{border-collapse: collapse;empty-cells: show;}
tbody{border-bottom:1px solid #000;}
tr{border-bottom:1px solid #000;}
td{border-bottom:1px solid #000;}
<table>
    <tbody><tr><td>1</td><td>2</td><td>3</td><td>4</td>
    </tr></tbody>
    <tbody><tr><td>1</td>
    </tr></tbody>
    <tbody><tr><td>1</td><td>2</td>
    </tr></tbody>
    <tbody><tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td>
    </tr></tbody>
</table>

Upvotes: 3

Views: 464

Answers (2)

Ahm23
Ahm23

Reputation: 366

Your new code:

table {
  border-collapse: collapse;
  empty-cells: show;
}

tr {
  border-bottom: 1px solid #000;
  display: block;
}
<table>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>1</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
  </tbody>
</table>

Just changed the display CSS property of the rows to block. This isn't the perfect solution for dynamic data so I would suggest making a table out of divisions and CSS.

I also suggest that you accept @Temani Afif answer since it is better than mine in the way that you can keep your table structure as well using the pseudo elements.

Upvotes: 1

Temani Afif
Temani Afif

Reputation: 272589

Use a pseudo element to create a long line and hide the overflow:

table {
  border-collapse: collapse;
  empty-cells: show;
  overflow: hidden;
}

td {
  position: relative;
  padding: 5px;
}

td:first-child:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: -100vw;
  ;
  height: 1px;
  background: #000;
}
<table>
  <tbody>
    <tr>
      <td>111</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
    <tr>
      <td>1</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>33</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
  </tbody>
</table>

Upvotes: 1

Related Questions