Question

我有一张表，因为我要在列内重复数据。一列具有属性，另一列具有该属性的值。当数据包装的属性和值未正确对齐时，我遇到了问题。以下是我的示例。 My example

    <table cellspacing="0" celpadding="0">
<thead>
  <tr>
    <th>Property</th>
    <th>Value</th>
  </tr>
</thead>
<tbody>
  <tr>
  <td>
    <div>Property 1</div>
    <div>Property 2</div>
    <div>Property 3</div>
    <div>Property 4</div>
  </td>
  <td>
    <div>Value 1</div>
    <div>Value 2</div>
    <div>Value 3</div>
    <div>Value 4</div>
  </td>
</tr>
<tr>
  <td>Property 2</td>
  <td>Value 2</td>
</tr>
<tr>
  <td>Property 1</td>
  <td>Property 1</td>
</tr>
</tbody>
</table>
body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
  color:#fff;
}

table{
  width:100px
}
table tr td,table tr th{border:1px solid #fff;padding:5px;}
table tr td div{
  border-bottom:1px solid #eee;
  padding:5px 0;
}

现在，我已经将固定宽度赋予表格以产生问题。在这种情况下，我应该怎么做才能解决此问题。我想将属性和值分别与各自的值对齐。请帮忙。

Answer 1

解决问题的最简单方法是在height规则中添加固定的table tr td div，以使其正确对齐。因此，您可以将该特定规则更新为：

table tr td div{
  border-bottom: 1px solid #eee;
  padding: 5px 0;
  height: 48px;
}

但是，<div>并没有真正应该放入表中。也许您需要重新考虑表的结构，因为这肯定会存在可访问性问题。

Answer 2

使用在您的divs元素中不包含随机td的经典表有什么问题？考虑以下内容：

<table cellspacing="0">
  <tr>
    <td>Property 1</td>
    <td>Value 1</td>
   </tr>
  <tr>
    <td>Property 2</td>
    <td>Value 2</td>
   </tr>
  <tr>
    <td>Property 3</td>
    <td>Value 3</td>
  </tr>
  <tr>
    <td>Property 4</td>
    <td>Value 4</td>
  </tr>
</table>

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
  color:#fff;
}

table{
  width:200px
}
td {
  width:100px;
  padding:10px;
  border:1px solid white;
}

这里是一个小提琴：https://jsfiddle.net/8dyxqbkz/2/

Answer 3

对于表行，您应该使用<tr><tr/>标签和<td><td/>标签作为表格单元格。

让我展示一个例子：

<table cellspacing="0" celpadding="0">
<tr>
  <td>
    Property 1
  </td>
  <td>
    Property 2
  </td>
  <td>
    Property 3
  </td>
  <td>
    Property 4
  </td>  
</tr>
<tr>  
    <td>Value 1</td>
    <td>Value 2</td>
    <td>Value 3</td>
    <td>Value 4</td>  
</tr>
<tr>
  <td>Property 2</td>
  <td>Property 1</td>
</tr>
<tr>
  <td>Value 2</td>
  <td>Property 1</td>
</tr>
</table>

表列中的数据对齐

3 个答案: