如何为显示为表格单元格的 div 设置自定义宽度答案

【问题标题】：How to set custom width for div displayed as table-cell如何为显示为表格单元格的 div 设置自定义宽度
【发布时间】：2014-05-26 21:07:16
【问题描述】：

另外，我想将 div 中的东西垂直和水平居中。我试过了，但没有什么对我有用。我试过了，添加绝对位置。然后我可以正常设置宽度和高度，但是我在 div 内遇到宽度文本问题：我不能垂直居中

下面是简单的代码：

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<style>

.Table{
background-color:red;
display:table;
height:400px;
width:300px;
}

.Row1{
background-color:blue;
display:table-row;
text-align:center;
vertical-align:middle;
width:20px; 
height:100px;
position:relative;
}

</style>    

<div class="Table">

<div class="Row1">
<p>Row1</p>
<!--<div class="Cell1"></div>
<div class="Cell2"></div>
<div class="Cell3"></div>-->
</div>

<div class="Row2">
<p>Test</p>
</div>
</div>
</body>
</html>

我认为一种解决方案是：再次将内部 div 显示为表格，然后将段落设置为表格单元格。之后，我可以使用对齐文本或垂直对齐来轻松居中。我也可以很容易地设置这个 div 的宽度和高度。

【问题讨论】：

你应该看看这个答案stackoverflow.com/a/17521229/3421070
与表行类似的问题。对于行，我无法更改宽度，就像我无法更改单元格的高度一样。我是 html 新手，所以请原谅我问了一些简单的问题。

标签： css

【解决方案1】：

你的问题真的不是很清楚。您不能设置表格行的宽度（它跨越表格的整个宽度），但您可以设置单元格的宽度。

Here's an example CSS table with content centred in each cell.

HTML：

<div class="table">
    <div>
        <div class="cell1">Cell1</div>
        <div>Cell2</div>
        <div>Cell3</div>
    </div>
    <div>
        <div>Cell4</div>
        <div>Cell5</div>
        <div>Cell6</div>
    </div>
</div>

CSS：

.table {
    /* a table */
    display:table;
    height:400px;
    width:300px;
    border-collapse:collapse;
}
.table > div {
    /* rows */
    background-color:blue;
    display:table-row;
}
.table > div > div {
    /* cells */
    background-color:pink;
    display:table-cell;
    text-align:center;
    vertical-align:middle;
    border:1px solid red;
}
.table .cell1 {
    /* a specific cell */
    width:20px;
    background-color:lime;
}

http://jsfiddle.net/TU9rj/

【讨论】：

感谢您的回复。我以为我可以像设置任何 div 一样正常设置宽度和高度。但显然没有选择。无论里面的内容如何，如何设置特定大小的单元格或行？有办法吗？