如果我有一個固定長度的文本，然後我可以很容易地居中例如如何填充單元格的內容居中
但是，可以說有可變長度的數據，
居中暱稱的內容會影響可讀性。有沒有一種方法來填充內容並以最長的長度爲中心？
<td>
<div style="padding-left: 30%;">
...content
</div>
</td>
值「30％」只是對暱稱的粗略估計。
然而，這30％將改變，如果該列期待更長的數據。以編程方式確定我將「30」作爲該值的一種好方法是什麼？
更新，居中文本不是我正在尋找的。我想中心的文字和左對齊，單獨爲中心的文字會給我
什麼，我想
您可以通過提像素大小嚐試可視化表示
<td>
<div style="padding-left: 30px;">
...content
</div>
</td>
是的，現在我很難將該值編碼爲30％。但它是硬編碼的。所以，如果我遇到一個較長的列，它可能看起來很有趣，我必須將該特定列的代碼硬編碼爲40％。我只是試圖找到一種方法來編程這樣做，所以它的每一列都很漂亮 – Zanko
更新
技術上這個答案是正確的，但我們不能因此視覺根據我做這件事的最佳方法是相同的左右填充添加到這兩個<th>和<td>和<th>刪除text-align:center看到它。這只是我的看法。我們將拭目以待別人怎麼看待它。 :)
而是添加填充到一邊的，你需要添加它的兩側。
table tr td{
padding:5px 15%;
}
我已經創建了一個簡單的例子。
table{
width:200px;
}
table tr th{
background:#ccc;
text-align:left;
padding:5px 15%;
}
table tr td{
padding:5px 15%;
background:#eee;
}<table>
<tr>
<th>Nickname</th>
</tr>
<tr>
<td>One</td>
</tr>
<tr>
<td>Big Name</td>
</tr>
<tr>
<td>A Very Big Name</td>
</tr>
<tr>
<td>This is a very big name</td>
</tr>
</table>試試這個，
td{
padding:5px;
text-align:center;
}
所以使它響應，你應該使用自舉3
試試這個，你一定會得到你的答案 bootstrap tables
和那裏類
<tr class="something">
<td class="col-md-2">A</td>
<td class="col-md-3">B</td>
<td class="col-md-6">C</td>
<td class="col-md-1">D</td>
</tr>
您需要javascript來確定內容的寬度和表數據寬度。
var td = document.querySelectorAll('td > div');
var width = 0;
var clientWidth = 0;
// determine the width
[].forEach.call(td, function(e) {
clientWidth = e.parentNode.clientWidth; // the width is the same for all td's
if (e.clientWidth > width) {
width = e.clientWidth;
}
});
// set the padding
[].forEach.call(td, function(e) {
e.style.paddingLeft = (clientWidth - width)/2 + 'px';
e.style.paddingRight = (clientWidth - width)/2 + 'px';
});table {
border-collapse: collapse;
}
th {
text-align: center;
}
th, td {
border: 1px solid #000;
}
td > div {
display: inline-block; /* set this because we want to calculate the width, block element has 100% */
padding: 10px 0;
}<table style="width: 50%">
<tr>
<th>Nickname</th>
</tr>
<tr>
<td><div>Data 1 Data 1Data 1Data 1</div></td>
</tr>
<tr>
<td><div>Data 2</div></td>
</tr>
<tr>
<td><div>Data 3</div></td>
</tr>
<tr>
<td><div>Data 4</div></td>
</tr>
<tr>
<td><div>Data 5</div></td>
</tr>
<tr>
<td><div>Data 6</div></td>
</tr>
<tr>
<td><div>Data 7</div></td>
</tr>
<tr>
<td><div>Data 8</div></td>
</tr>
</table>變化的硬編碼表寬度看到效果。
我認爲你正在尋找一個合理的路線，而不是居中。 – Anthony
添加文本對齊：中心和垂直對齊：中間 –
我已更新我的問題，我不尋找居中文本。除了居中之外，我還想左對齊。它就像一個填充效果，但我的意圖不是硬編碼填充值 – Zanko