表格列内的数据对齐答案

【问题标题】：Data Alignment inside Table column表格列内的数据对齐
【发布时间】：2019-10-29 01:33:05
【问题描述】：

我有一个表，我在列内重复数据。一列具有属性，另一列具有该属性的值。当数据包装属性和值未正确对齐时，我遇到了问题。下面是我的例子。 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;
}

现在我已经给表格提供了固定宽度来产生我的问题。在这种情况下，我应该怎么做才能解决这个问题。我想将属性和值与各自的值平等地对齐。请帮忙。

【问题讨论】：

这并不是一张桌子应该的工作方式。
很奇怪的表格使用方式。您能否提供预期输出的图像？

标签： javascript html css html-table

【解决方案1】：

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

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

但是，<div>s 并不真正应该进入表格。也许您需要重新考虑表格的结构，因为这肯定会出现可访问性问题。

【讨论】：

谢谢@Angelos，但我不知道内容长度意味着属性名称会变得很长，那么在这种情况下高度将不起作用我该怎么办。
@vedankitakumbhar 就像我和其他人提到的那样，使用属于表格的元素而不是其中的<div>s 可能会更好。这绝对是一种更简单、更灵活、更好的方式来处理您的问题。
项目已经建立在这个结构中，有什么方法可以使用 javascript 或 css 来做到这一点？
可能有几个，但它们太长，无法在此处概述，并且随着时间的推移它们可能会出现更多问题（即使用 CSS Grid 或 Flexbox）。另外，无论如何，语义和可访问性仍然是错误的。最好的解决方案是重构代码。我同意“如果它没有坏，就不要修复它”的心态，但这显然是坏的。

【解决方案2】：

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

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

【讨论】：

感谢@A Tom Called Stu，但我无法将它们分开，因为属性在标题中有共同的标题，而值在标题中有共同的标题

【解决方案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>

【讨论】：