简体   繁体   English

当第一列包含html表中的数据和空单元格时,如何均匀地对齐第二列数据单元格?

[英]how to align the second column of data cells evenly when first column contains data and empty cells in a html table?

how to align the second column of data cells evenly when first column contains data and empty cells in a html table? 当第一列包含html表中的数据和空单元格时,如何均匀地对齐第二列数据单元格?

For example, how to align the following data below into a html table. 例如,如何将以下数据与html表对齐。

Column1     Column2
===================
data 1      data 2
            data 3
            data 4
            data 5
blank line
data 1      data 2
            data 3
            data 4
            data 5`

Like so? 像这样? Demo: http://jsfiddle.net/a2ckX/ 演示: http//jsfiddle.net/a2ckX/

<table cellpadding="5" cellspacing="0">
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td style="vertical-align: top">data 1</td>
        <td>
            <table cellpadding="0" cellspacing="0">
                <tr>
                    <td>Data 2</td>
                </tr>
                <tr>
                    <td>Data 3</td>
                </tr>
                <tr>
                    <td>Data 4</td>
                </tr>
                <tr>
                    <td>Data 5</td>
                </tr>
                <tr>
                    <td>Data 6</td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td colspan="2">Spacer</td>
    </tr>
    <tr>
        <td style="vertical-align: top">data 1</td>
        <td>
            <table cellpadding="0" cellspacing="0">
                <tr>
                    <td>Data 2</td>
                </tr>
                <tr>
                    <td>Data 3</td>
                </tr>
                <tr>
                    <td>Data 4</td>
                </tr>
                <tr>
                    <td>Data 5</td>
                </tr>
                <tr>
                    <td>Data 6</td>
                </tr>
            </table>
        </td>
    </tr>
</table>

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 我如何构建 HTML 表,其中包含第一列上的合并单元格和第二列上的 2 个单元格 - how i can build HTML table which contain merged cells on the first column and 2 cells on the second column 如何检查html列是否包含空单元格? - How to check whether a html column contains empty cells? HTML 表的打印将单元格放在第一列 - Print of HTML table drops cells in first column 是否可以在HTML表格的第二列中选择单元格,然后使用CSS将其移至第一列的底部? - Is it possible to select cells in the second column of an HTML table and move them to the bottom of the first column using CSS? 如何在HTML表的第一列的单元格中添加复选框? - how to add checkboxes in cells of first column of HTML table? 如何在html表的列内添加单元格? - How to add cells within column in html table? HTML表:已经指定“ colspan”时如何调整数据单元格的大小? - HTML Table: How to resize data cells when already specified “colspan”? 用来自mysql的数据填充HTML表格会产生空的表格单元格 - Populating HTML Table with Data from mysql Gives Empty Table Cells 仅在一行的最后一列中添加数据,并保持先前​​的单元格为空 - Adding data only in last column of a row and keeping preceeding cells empty 当 justify-content: space-evenly &amp; there are a column-gap 时,如何计算“单元格”之间的距离? - How is the distance between 'cells' calculated when justify-content: space-evenly & there is a column-gap?
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM