时间戳

首页 > 解决方案 > 如何对齐多个表格的中间单元格？

html - 如何对齐多个表格的中间单元格？

问题描述

div, td, table {border: 1px solid black; }
    div {display: inline-block;}
    .middle {background: lightgreen;}
Not aligned:
<div>
<table>
    <tbody>
        <tr>
            <td valign=bottom>short text</td>
            <td class="middle">middle</td>
            <td valign=bottom>very ------------------------ long</td>
        </tr>
    </tbody>
</table>
<table>
    <tbody>
        <tr>
            <td valign=bottom>very ----------------- long</td>
            <td class="middle">middle</td>
            <td valign=bottom>short text</td>
        </tr>
    </tbody>
</table>
</div>
<br>
Aligned manually:
<div>
<table style="margin-left: 6em;">
    <tbody>
        <tr>
            <td valign=bottom>short text</td>
            <td class="middle">middle</td>
            <td valign=bottom>very ------------------------ long</td>
        </tr>
    </tbody>
</table>
<table>
    <tbody>
        <tr>
            <td valign=bottom>very ----------------- long</td>
            <td class="middle">middle</td>
            <td valign=bottom>short  -</td>
        </tr>
    </tbody>
</table>
</div>

将表格居中不起作用：两边的内容大小不同。

我不能将两者合并到同一张表中：我想保留与内容大小相同的边框。

我希望有一种方法可以在没有 javascript 的情况下做到这一点。那将是最后的手段。

标签： htmlcss

解决方案

推荐阅读