如何将表格数据元素本身在行中居中？

Question

我有一个表格，其布局如下，用于类似时间表的应用程序：

<table width="100%" border="1px">
    <tr>
        <th colspan="11" align="center">Function</th>
    </tr>
    <tr>
        <td align="center">(01)</td> <!-- 7 more TD's after this -->
    </tr>
    <tr>
        <th colspan="11" align="center">Products</th>
    </tr>
    <tr>
        <td align="center">(02)</td> <!-- 10 more TD's after this -->
    </tr>
    <tr>
        <th colspan="11" align="center">Other Codes</th>
    </tr>
    <tr>
        <td align="center">V</td> <!-- 6 more TD's after this -->
    </tr>
</table>

每一行都有不同数量的表格数据元素。我试图让表格数据元素本身在整行中居中，而不仅仅是元素本身内部的文本，但我似乎无法找到如何做到这一点。

我在 Google 上搜索到的任何内容都只是为我提供了与单元格本身内容的 align 和 valign 属性相关的各种信息，而不是在行中将单元格居中。

我尝试过调整边距和边框大小，但似乎并没有像其中一些线程中建议的那样产生任何影响：

https://stackoverflow.com/a/8649701/1189566

How to align td elements in center

和其他一些论坛，但没有任何成功。

Answer 1

如果您必须使用表格元素，您可以在表格数据中创建一个表格并获得如下内容： http://jsfiddle.net/ykevsws0/

<table width="100%" border="1px">
    <tr>
        <th colspan="11" align="center">Function</th>
    </tr>
    <tr>
        <td align="center">(01)</td>
        <!-- 7 more TD's after this -->
    </tr>
    <tr>
        <th colspan="11" align="center">Products</th>
    </tr>
    <tr>
        <td align="center">(02)</td>
        <!-- 10 more TD's after this -->
    </tr>
    <tr>
        <th colspan="11" align="center">Other Codes</th>
    </tr>
    <tr>
        <td align="center">
            <table>
                <tr>
                    <td>V</td>
                </tr>
                <tr>
                    <td>V</td>
                </tr>
                <tr>
                    <td>V</td>
                </tr>
                <tr>
                    <td>V</td>
                </tr>
                <tr>
                    <td>V</td>
                </tr>
            </table>
        </td>
    </tr>
</table>

如果由于某种原因您无法操作标记，另一种方法是使用 css 强制表数据显示：块，像这样（可能想要指定一个 css 类或其他东西，将此样式应用于 td会导致问题）： http://jsfiddle.net/jagsyguv/

<table width="100%" border="1px">
        <tr>
            <th colspan="11" align="center">Function</th>
        </tr>
        <tr>
            <td align="center">(01)</td>
            <!-- 7 more TD's after this -->
        </tr>
        <tr>
            <th colspan="11" align="center">Products</th>
        </tr>
        <tr>
            <td align="center">(02)</td>
            <!-- 10 more TD's after this -->
        </tr>
        <tr>
            <th colspan="11" align="center">Other Codes</th>
        </tr>
        <tr>
            <td>
                V
            </td>
            <td>
                V
            </td >
            <td>
                V
            </td>
            <td>
                V
            </td>
        </tr>
    </table>

Answer 2

你需要嵌套表来实现这个结果

<table width="100%" border="1px">
   <tr>
      <th colspan="11" align="center">Function</th>
   </tr>
   <tr>
      <td colspan="11" align="center">
         <table border="1px">
            <tr>
               <td align="center">(01)</td>
               <td align="center">(01)</td>
               <td align="center">(01)</td>
               <td align="center">(01)</td>
               <td align="center">(01)</td>
               <td align="center">(01)</td>
               <td align="center">(01)</td>
               <td align="center">(01)</td>
               <!-- 7 more TD's after this -->
            </tr>
         </table>
      </td>
   </tr>
   <tr>
      <th colspan="11" align="center">Products</th>
   </tr>
   <tr>
      <td colspan="11" align="center">
         <table border="1px">
            <tr>
               <td align="center">(02)</td>
               <td align="center">(02)</td>
               <td align="center">(02)</td>
               <td align="center">(02)</td>
               <td align="center">(02)</td>
               <td align="center">(02)</td>
               <td align="center">(02)</td>
               <td align="center">(02)</td>
               <td align="center">(02)</td>
               <td align="center">(02)</td>
               <td align="center">(02)</td>
               <!-- 10 more TD's after this -->
            </tr>
         </table>
      </td>
   </tr>
   <tr>
      <th colspan="11" align="center">Other Codes</th>
   </tr>
   <tr>
      <td colspan="11" align="center">
         <table border="1px">
            <tr>
               <td>V</td>
            </tr>
            <tr>
               <td>V</td>
            </tr>
            <tr>
               <td>V</td>
            </tr>
            <tr>
               <td>V</td>
            </tr>
            <tr>
               <td>V</td>
            </tr>
         </table>
      </td>
   </tr>
</table>

或者你可以考虑使用css结合div标签来生成表格/网格系统

Answer 3

您应该使用 div。 div 的作用与表格不同，因此您可以使用一些样式选项将其放置在页面中您想要的位置。

您也可以仅使用 div 构建此表。我更喜欢使用 div 而不是表格，因为习惯了它们会更容易处理。

尝试搜索有关 div 及其用法的更多信息。

这是一个简单的例子：

<div style="margin:auto; width:60%; padding:10px;">
    <table style width="100%" border="1px">
    <tr>
        <th colspan="11" align="center">Function</th>
    </tr>
    <tr>
        <td align="center">(01)</td> <!-- 7 more TD's after this -->
    </tr>
    <tr>
        <th colspan="11" align="center">Products</th>
    </tr>
    <tr>
        <td align="center">(02)</td> <!-- 10 more TD's after this -->
    </tr>
    <tr>
        <th colspan="11" align="center">Other Codes</th>
    </tr>
    <tr>
        <td align="center">V</td> <!-- 6 more TD's after this -->
    </tr>

    </table>
</div>

Answer 4

在<td> 单元格中居中元素的最简单方法如下。 （这适用于<img>、<video> 和大多数其他元素）：

<table width="100%" border="0" cellspacing="0" cellpadding="100%">
<tr>
<td>First Element</td>
<td>Second Element</td>
</tr>
</table>