CODEWITHSUNDEEP
htmlcss
Fel
Fel

Reputation: 4818

Left padded table rows

I've been trying to mimic the following table layout using HTML/CSS:

Left padded rows example

NOTE: It's a table from LibreOffice Writer which I modified using Gimp to show you what I mean.

As you can see, I'd like to add some left padding to some rows to show visually that they are inside a group.

I tried using padding-left of both <td> and <tr>, and a little trick that don't work: applying 'border-left: 14px solid white' to the <tr> and then 'border-left: 15px solid black' to the first <td> in the row. I thought that the border in the <td> would overlap the <tr> border by 1px, but HTML rendering seems not to work that way :)

Also, I tried to do this:

<tr>
  <td colspan="9">
    GROUP 1
  </td>
</tr>
<tr>
  <td colspan="9" style="padding-left: 15px">
    <table>
      <tr>
        <td> <!-- # --> </td>
        <td> <!-- Id --> </td>
        <td> <!-- Field1 --> </td>
        (ETC)
        <td> <!-- Comment --> </td>
      </tr>
    </table>
  </td>
</tr>

The problem with this approach is that the column lines of the inside the 'group' don't match the ones that are outside so it doesn't look good...

Any suggestion?

Upvotes: 1

Views: 123

Answers (4)

Thilina
Thilina

Reputation: 102

Try this way.

HTML

<table style="width:100%">

    <tr>
        <td style="width:25%;">January</td>
        <td style="width:25%;">$100</td>
        <td style="width:25%;">January</td>
        <td style="width:25%;">$100</td>
    </tr>
    <tr>
        <td>February</td>
        <td>$80</td>
        <td>February</td>
        <td>$80</td>
    </tr>
    <td colspan="9">
        GROUP 1
    </td>
</table>
<table style="width:95%;margin-left:5%">

    <tr>
        <td style="width:20%;">January</td>
        <td style="width:25%;">$100</td>
        <td style="width:25%;">January</td>
        <td style="width:25%;">$100</td>
    </tr>
    <tr>
        <td>February</td>
        <td>$80</td>
        <td>February</td>
        <td>$80</td>
    </tr>
</table>
<table style="width:100%">

    <tr>
        <td style="width:25%;">January</td>
        <td style="width:25%;">$100</td>
        <td style="width:25%;">January</td>
        <td style="width:25%;">$100</td>
    </tr>
    <tr>
        <td>February</td>
        <td>$80</td>
        <td>February</td>
        <td>$80</td>
    </tr>
</table>

CSS

table,th,td {
        border: 1px solid black;
    }

Upvotes: 0

Sergey Benzenko
Sergey Benzenko

Reputation: 280

Try this. Remove borders from table cells, instead add divs within each table cell with the border:

<tr>
  <td colspan="4">
    <div class="cell">GROUP 1</div>
  </td>
</tr>
<tr>
  <td style="padding-left: 15px">
    <div class="cell"> col 1</div>
  </td>
  <td>
    <div class="cell"> col 2</div>
  </td>
  <td>
    <div class="cell"> col 3</div>
  </td>
  <td>
    <div class="cell"> col 4</div>
  </td>
</tr>

CSS:

div.cell {
  border-left: 1px solid #000;
  border-right: none;
  border-bottom: none;
}
table {
  border-collapse: collapse;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
}
table td {
  padding: 0;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
}

See example here: https://codepen.io/anon/pen/baMdWP

Upvotes: 2

Waqar Azhar
Waqar Azhar

Reputation: 64

Assign padding-left: 15px to every sub-sequent <tr> that is to be displayed as part of the group. It's better to use a class instead of applying inline style.

Upvotes: 0

slash197
slash197

Reputation: 9034

Suggestion:

.with-padding {
    margin-left: 10px;
}


<table class="normal">
...
</table>
<table class="with-padding">
...
</table>
<table class="normal">
...
</table>

Upvotes: 0

Related Questions