HTML表格宽度与CSS

Question

I have data coming in and I parse it into a table on a webpage. There are 3 cells side by side to each other. (Cell 0,0 : Cell 0,1 : Cell 0,2)

I'm trying to making it so that the cells are evenly split across the div making it so the first cell's text is aligned left, middle cell is aligned center and last cell is aligned right.

I've tried the following for css

 td { width: calc(100%/3); } 

 <table border=1 style="border: 1px red dashed; width: 250px;"> <tr> <td>first</td> <td>second with wider contents</td> <td>third</td> </tr> </table> <table border=1 style="border: 1px blue dashed; width: 250px;"> <tr> <td>first</td> <td>second</td> <td>third with wider contents</td> </tr> </table> 

It doesn't give me the output I'm looking for. What I'm trying to accomplish is I have multiple tables on one page and want the cells to be aligned all the way down

Answer 1

Are you setting your table to the full width of the div that it's nested in?

For example:

div {
  width: 300px;
}

table {
  width: 100%;
  border: 1px solid black;
}


td {
  width: calc(100%/3);
  border: 1px solid black;
}

Just made this quick, I think this is what you're looking for: https://jsfiddle.net/nsxLfv00/

Answer 2

If you want to set the alignment of the content in the three cells use the n-th child css selector

td:nth-child(1){
   text-align: left;
}

and accordingly for the middle and the right column.

Answer 3

While it's possible in pure CSS, I would advice you Bootstrap, Flexbox or any grid framework to achieve that easily. In BS it would be something like :

<div class=container>
  <div class="row">
    <div class="col-sm-4">
      Your first cell content
    </div>
    <div class="col-sm-4">
      second
    </div>
    <div class="col-sm-4">
      third
    </div>    
  </div>
</div>

You may, of course, insert your table structure if you need to.