Question

如果我有一个固定长度的文本，那么我可以轻松地将其置于例如

但是，假设有长度可变的数据，

将Nickname的内容居中将影响可读性。有没有办法填充内容并以最长的长度为中心？

<td>
    <div style="padding-left: 30%;">
       ...content
    </div>
</td>

价值＆＃34; 30％＆＃34;只是对昵称的粗略估计。

但是，如果该列期望更长的数据，则这30％将会改变。什么是以编程方式确定我放置的值的好方法＆＃34; 30＆＃34; ？

更新，居中文字不是我想要的。我想将文本居中并左对齐，单独居中文本会给我

我想要的视觉表现

Answer 1

您需要使用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>

更改硬编码的表格宽度以查看效果。

Answer 2

您可以尝试提及像素大小

<td>
    <div style="padding-left: 30px;">
       ...content
    </div>
</td>

Answer 3

<强>更新

从技术上讲，这个答案是正确的，但我们无法直观地看到它，所以根据我的说法，最好的方法是向<th>和<td>添加相同的左右填充并删除{来自text-align:center的{1}}。这只是我的看法。我们将等待，看看其他人对此的看法。：）

不是在一侧添加填充，而是需要在两侧添加填充。

<th>

我创建了一个简单的例子。

＆＃13;

table tr td{
      padding:5px 15%;
}

＆＃13;

table{
  width:200px;
}

table tr th{
  background:#ccc;
  text-align:left;
  padding:5px 15%;
}

table tr td{
  padding:5px 15%;
  background:#eee;
}

＆＃13;

Answer 4

试试这个，

td{
  padding:5px;
  text-align:center;
}

Answer 5

因此，为了使其响应，您应该使用bootstrap 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>

如何将单元格内容填充到中心

5 个答案: