CODEWITHSUNDEEP
htmlcss
donchanger
donchanger

Reputation: 51

CSS Table uniform column widths

Is there a way to get a table with equal column width without specifying the overall table width and without specifying the individual column widths?

In other words, have every column be the width of the widest column - without knowing in advance the width of that widest column?

(And, I guess I mean without waiting for the table to render, then finding the width of each column, then have JS set the widths of all columns to that largest width).

Upvotes: 0

Views: 883

Answers (3)

Brett Donald
Brett Donald

Reputation: 14349

What about this? Does this do what you're after?

Here's what you said you wanted:

Is there a way to get a table with equal column width without specifying the overall table width and without specifying the individual column widths?

So my CSS here doesn't specify a table width, nor does it specify fixed column widths. It does, however, specify percentage column widths based on the number of columns in the table.

The result is a table where all the columns are the same width, and the table is only as wide as it needs to be.

td {
  border: 1px solid silver;
  width: 20%;
}
<table class="a">
  <tr>
    <td>1</td>
    <td>22</td>
    <td>333</td>
    <td>4444</td>
    <td>55555</td>
  </tr>
  <tr>
    <td>66</td>
    <td>7777</td>
    <td>888888</td>
    <td>99999999</td>
    <td>0000000000</td>
  </tr>
</table>

Upvotes: 0

Brett Donald
Brett Donald

Reputation: 14349

I don't think you can do it with <table>, but you can do it with display: grid.

.a {
  display: inline-block;
}
.a>div {
  display: grid;
  grid-template-columns: repeat(5,1fr);
  gap: 2px;
}
.a>div>div {
  border: 1px solid silver;
}
<div class="a">
  <div>
    <div>1</div>
    <div>22</div>
    <div>333</div>
    <div>4444</div>
    <div>55555</div>
    <div>66</div>
    <div>7777</div>
    <div>888888</div>
    <div>99999999</div>
    <div>0000000000</div>
  </div>
</div>

Upvotes: 0

theaminuli
theaminuli

Reputation: 134

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  background-color: #2196F3;
  padding: 10px;
}
.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}
<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>  
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>  
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>  
</div>

An alternative solution to the table could be a CSS grid system. You can solve using CSS grid if you want

https://www.w3schools.com/css/css_grid.asp

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  background-color: #2196F3;
  padding: 10px;
}
.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}
<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>  
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>  
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>  
</div>

Upvotes: 1

Related Questions