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

Html – Inline breaks padding/text-indent

I have implemented a style that changes the layout of a table to fit a smartphone screen, based on this answer.

It does what I am asking it to do except for 1 thing: it does not allow for any word wrapping, for reasons that will become obvious. Problem is: I need word wrap for the table to fit on the table screen.

For illustration, I created this JSFiddle.

If the view is sufficiently narrow, the layout changes as expected but the cells containing word wrapping have this annoying behavior that the 2nd line ignores the padding.
This is caused by the display:inline in the CSS (Specifically, the one with the commented /*-block*/ next to it.
This is the result.

Padding is ignored

When uncommenting the -block to have display:inline-block, then the padding is not ignored as desired but the borders get disconnected from the table on the left, and extend outside the table on the right.

Borders affected by padding

What is the way to get the best of both worlds (correct border as in the first screenshot but with paddings as in the second)?

Tags:

2

Answers


  1. 0

    This is a feature of an inline formatting context.

    When an inline box is split, margins, borders, and padding have no
    visual effect where the split occurs.

    <div style="display: inline; padding: 10rem;">
  This is a long text to test what happens to a paragraph shown in an inline div. It is expected the 2nd line onward does not respect the padding.
</div>

    Are you sure you don’t want inline-block instead?

    <div style="display: inline-block; padding: 2rem; background: cyan;">
  This is a long text to test what happens to a paragraph shown in an inline div. It is expected the 2nd line onward does not respect the padding.
</div>
    Login or Signup to reply.
  2. 0

    When uncommenting the -block to have display:inline-block, then the padding is not ignored as desired but the borders get disconnected from the table on the left, and extend outside the table on the right.

    The extending outside to the right is of course the result of 100% width plus .5em padding on each side – that could be fixed using box-sizing.

    But that still doesn’t get your "borders" extended.

    So let’s simply make the element block to begin with, and remove the width.

    And your borders, which – luckily, in this instance – are made via pseudo elements already, can then simply be extended to cover the necessary width, by giving them a negative margin matching the padding on either side.

    table {
  border:1px solid;
  border-color: inherit;
  border-collapse: collapse;
  table-layout: auto;
  width: -moz-fit-content;
  width: fit-content;
  margin: auto;
}
td, th {
  vertical-align:middle;
  border:1px solid;
  border-color:var(gray);
  padding: .5em 1em
}

@media only screen and (max-width: 1024px) {

  .wide-table tr {
    height:4em;
    border-bottom:1px solid
  }
  .wide-table tr:first-child {
    color: rgb(var(--text-highlight));
    font-weight: 600
  }
  .wide-table th {
    border:1px solid;
    padding:0 .25em
  }
  .wide-table td {
    padding:0 .5em;
    border-style: none;
    display: block; /* just block to begin with, and width: 100% removed */
    font-size: 90%;
  }
  .wide-table td:not(:last-child)::after {
    display:block;
    content:'';
    height:0;
    border-bottom: 1px solid;
    margin: 0 -.5em; /* negative margin on either side, that matches the padding */
  }
}
    <table class="wide-table">
<tr>
<th>Header line - item 1</th>
<th>Header line - item 2</th>
<td>Header line - item 3</td>
<td>Header line - item 4</td>
<td>Header line - item 5</td>
</tr>
<tr>
<th>Content line - item 1</th>
<th>Content line - item 2</th>
<td>Content line - item 3</td>
<td>Content line - item 4</td>
<td>Long content line intended to have word wrap - item 5</td>
</tr>
<tr>
<th>Content line - item 1</th>
<th>Content line - item 2</th>
<td>Content line - item 3</td>
<td>Content line - item 4</td>
<td>Long content line intended to have word wrap - item 5</td>
</tr>
</table>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search