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强制表数据显示：block，就像这样（可能想要指定一个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

你应该使用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 3

您需要嵌套表来实现此结果

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

在library(GenomicRanges) a1.GRanges <- GRanges(a1$Chromosome, ranges = IRanges(a1$Start, a1$End), seqinfo = a1$exons) a2.GRanges <- GRanges(a2$Chromosome, ranges = IRanges(a2$Start, a2$End), seqinfo = a2$SampleID) findOverlaps(a2.GRanges,a1.GRanges)单元格中居中元素的最简单方法如下。（这适用于<td>，<img>和大多数其他元素）：

<video>

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

4 个答案: