CODEWITHSUNDEEP
htmlcsshtml-table
klm123
klm123

Reputation: 12865

How to distribute free space between <table> columns evenly?

I want to make my html table to take the full window width in a way that th elements content does not overlap + there are even spacing between column headings (see the picture). The space must scale with window width up to 0 (all words are hugging each other). How to do it?

big screen example:

big screen

small screen example:

small screen

By default the spacing between th elements gets proportional to the width of the elements.

If I use table-layout: fixed the width of the columns will be equal, i.e. space between them unti-proportional to width.

P.S. I need to use border-spacing: 0 because I need to highlight full table rows and with positive border-spacing the table background will be visible inbetween cells. P.P.S. the question is specifically about table layout. I know I can do anything with grid and flex box, but I'm trying to use right tags for right content, and in this case I have a table data, i.e. the solution should work with "display: table".

table {
  width: 80%;
  background: gray;
}

th {
  text-align: left;
}

.auto {
  background: #90EE90;
}

.fixed {
    table-layout: fixed;
  background: #ADD8E6;
}
<table class="auto">
<thead>
<tr>
<th>1</th>
<th>333</th>
<th>999999999</th>
<th>22</th>
</tr>
</thead>
<tbody>
<tr>
<td>aa</td>
<td>aa</td>
<td>aa</td>
<td>aa</td>
</tr>
</tbody>
</table>

<table class="fixed">
<thead>
<tr>
<th>1</th>
<th>333</th>
<th>999999999</th>
<th>22</th>
</tr>
</thead>
<tbody>
<tr>
<td>aa</td>
<td>aa</td>
<td>aa</td>
<td>aa</td>
</tr>
</tbody>
</table>

Upvotes: 1

Views: 1748

Answers (1)

Corrl
Corrl

Reputation: 7699

A probably a bit hacky only css solution would be to insert empty th/td elements and give them a realive width of 100% / amount of filled columns. Here 4 columns -> gap-width: 25% (use calc() if odd amount)

table {
  width: 80%;
  border-spacing: 0
}
th {
  text-align: left;
}
th,
td {  
  border: 1px solid teal;
}

.gap {
  width: 25%;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>

  <table>
    <thead>
      <tr>
        <th>1</th>
        <th class="gap"></th>
        <th>333</th>
        <th class="gap"></th>
        <th>999999999</th>
        <th class="gap"></th>
        <th>22</th>
        <th class="gap"></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>aa</td>
        <td class="gap"></td>
        <td>aa</td>
        <td class="gap"></td>
        <td>aa</td>
        <td class="gap"></td>
        <td>aa</td>        
        <td class="gap"></td>
      </tr>
    </tbody>
  </table>

</body>

</html>

Upvotes: 3

Related Questions