Html Tischbreite mit CSS

Question

Ich habe Daten kommen und ich parse es in einer Tabelle auf einer Webseite. Es gibt 3 Zellen nebeneinander. (Zelle 0,0: Zelle 0,1: Zelle 0,2)

Ich versuche es so zu machen, dass die Zellen gleichmäßig über das div verteilt werden, so dass der Text der ersten Zelle linksbündig ausgerichtet wird ist ausgerichtet Mitte und letzte Zelle ist rechts ausgerichtet.

Ich habe für CSS folgendes versucht

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>

Es gibt mir nicht die Ausgabe, die ich suche. Was ich versuche zu tun ist ich mehrere Tabellen auf einer Seite haben und wollen, dass die Zellen den ganzen Weg hinunter

ausgerichtet werden

Answer 1

Setzen Sie Ihre Tabelle auf die volle Breite des Divs, in dem es verschachtelt ist?

Zum Beispiel:

div { 
    width: 300px; 
} 

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


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

gemacht Genau dies schnell, ich denke, das ist das, was Sie suchen: https://jsfiddle.net/nsxLfv00/

Answer 2

Wenn Sie die Ausrichtung des Inhalts in den drei Zellen, die die n-th child css selector

verwenden festlegen möchten

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

und dementsprechend für die mittlere und die rechte Spalte.

Answer 3

Während es in reinem CSS möglich ist, würde ich Ihnen Bootstrap, Flexbox oder ein beliebiges Grid Framework empfehlen, um dies einfach zu erreichen. In BS wäre es so etwas wie:

<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> 

Sie können natürlich Ihre Tabellenstruktur einfügen, wenn Sie benötigen.