All geek questions in one place

How to make a dense cell around the text and expand the empty ones?

I would like to build tableone that has four columns: two with text and two empty. I want the blanks to expand as much as possible, and those whose text was dense.

The following snippet shows this table: the width of the columns is probably weighted with the size of the text inside.

table,
td {
  border: solid;
  border-collapse: collapse;
}
<table style="width: 100%">
  <tr>
    <td>This is some text</td>
    <td>And some more</td>
    <td></td>
    <td></td>
  </tr>
</table>
Run code

What can be done to turn this into a table like

enter image description here

where will the text be tightly surrounded by the cell, and the empty ones expanded?

+4
source share
2 answers

If the parameter flexboxis an option, you can do this:

  • Send display: flextotr

  • Give flex: 1two empty.

:

table,
td {
  border: solid;
  border-collapse: collapse;
}
table tr {
  display: flex;
}
td:nth-last-child(1),
td:nth-last-child(2) {
  flex: 1;
}
<body>
  <table style="width: 100%">
    <tr>
      <td>This is some text. This is some text</td>
      <td>And some more</td>
      <td></td>
      <td></td>
    </tr>
  </table>
</body>
+3

, , , . , , display: inline-block td:not(:empty), -.

<html>
  <head>
    <style>
      table, td {
        border: solid;
        border-collapse: collapse;
      }

      td:not(:empty) {
        width: 1px;
        white-space: nowrap;
      }
    </style>
  </head>
  <body>
    <table style="width: 100%">
      <tr>
        <td>This is some text</td>
        <td>And some more</td>
        <td></td>
        <td></td>
      </tr>
    </table>
  </body>
</html>
+2

Source: https://habr.com/ru/post/1658617/

More articles:


All Articles