Html表格宽度与css

我有数据进来，我解析成一个网页上的表格。有3个单元彼此并排。（Cell 0,0：Cell 0,1：Cell 0,2）Html表格宽度与css

我正在试图使单元在div上均匀分布，因此第一个单元格的文本左对齐，中间单元格对齐中心，最后一个单元格右对齐。

我试着对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>

它不给我，我要找的输出。我试图做到的是我有一个页面上的多个表和所需的单元格进行向下

来源

2017-05-30 Cody

欢迎堆栈溢出！ :) 你能提供一个片段吗？ – Strernd

'width：calc（100％/ 3）;'顺便说一句，你为什么需要'calc'？这是一个常数，操作的结果是33％，那么为什么不用'width：33％'代替呢？ – BackSlash

除了一小段（和/或小提琴）之外，你能扩展你的意思吗“不给我输出我正在寻找”？即，你能告诉我们你在做什么，并具体解释结果与期望/预期结果有何不同？ – Adrian

你是否将你的表格设置为它嵌套的div的全部宽度？

例如：

div { 
    width: 300px; 
} 

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


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

刚才提出这个快，我认为这是你在找什么： https://jsfiddle.net/nsxLfv00/

来源

2017-05-30 20:25:06 Jackson

这是答案，我的表没有设置为div的完整大小 – Cody

一路排列如果你想设置的三个单元格内容的对齐方式使用n-th child css selector

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

以及相应的中间和右列。

来源

2017-05-30 20:21:19 Strernd

-1

尽管在纯CSS中可能，但我会建议您使用Bootstrap，Flexbox或任何网格框架来轻松实现。在BS它会是这样的：

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

你当然可以，插入你的表结构，如果你需要。

来源

2017-05-30 20:24:46 GwadaKing

对这个问题使用Bootstrap是矫枉过正的。 OP没有表明他们使用任何CSS框架。此外，OP可能不得不学习如何使用Bootstrap，并可能花费数天而不是几分钟。 – amphetamachine

@amphetamachine：即使你在这一点上是对的，也没有提到它是一个小型还是大型项目。自由职业后端开发人员在切换到前端项目时并不知道这些框架，这经常发生。严重的是，学习BS不像学习node.js，一旦你坚持文档... – GwadaKing

Html表格宽度与css

回答

相关问题