html - 将两个表格列彼此对齐

标签 html css html-table

是否可以将这两个表格列对齐,使单元格 1a 与单元格 2a 对齐?现在,左外列似乎与右外列垂直居中

下面是源代码(html)和屏幕截图

<table>
  <tr> 
    <td>
      <table class="payment"> 
        <tr>
          <td> <input type="checkbox"></td>
          <td>info (1a)</td>
        </tr>
        <tr>
          <td></td>
          <td> descr ...</td>
        </tr>
      </table>
      <table class="payment"> 
        <tr>
          <td> <input type="checkbox"></td>
          <td>info (1b)</td>
        </tr>
        <tr>
          <td></td>
          <td> descr ...</td>
        </tr>
      </table>
      <table class="payment"> 
        <tr>
          <td> <input type="checkbox"></td>
          <td>info (1c)</td>
        </tr>
        <tr>
          <td></td>
          <td> descr ...</td>
        </tr>
      </table>
    </td>

    <!-- OUTER COLUMN 2 -->
    <td>
      <table class="payment">	
        <tr>
          <td> <input type="checkbox"></td>
          <td>info (2a)</td>
        </tr>
        <tr>
          <td></td>
          <td> decr ...</td>
        </tr>
      </table>
      <table class="payment">
        <tr>
          <td> <input type="checkbox"></td>
          <td>info (2b)</td>
        </tr>
        <tr>
          <td></td>
          <td> descr ...</td>
        </tr>
      </table>
      <table class="payment">
        <tr>
          <td> <input type="checkbox"></td>
          <td>info (2c)</td>
        </tr>
        <tr>
          <td></td>
          <td> descr ...</td>
        </tr>
      </table>
      <table class="payment">
        <tr>
          <td> <input type="checkbox"></td>
          <td>info (2d)</td>
        </tr>
        <tr>
          <td></td>
          <td> descr ...</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

图像 enter image description here

最佳答案

直接在 html 中先添加 valign=top tr:

<table>
    <tr valign=top> 
        <td>

        <table class="payment"> 
            <tr>
                <td> <input type="checkbox"></td>
                <td>info (1a)</td>
            </tr>
            <tr>

也就是说,除非 class="payment" 样式中的某些内容影响定位

关于html - 将两个表格列彼此对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38020607/

相关文章:

css - Bootstrap 3 - 在进度条上打印颜色?

php - 如何将数据库记录分布在多个列上?

javascript - 使用 jQuery 修改选定表格单元格的样式属性?

jquery - 将表格行推到底部并固定行数

javascript - 网站显示为不安全,因为流媒体提供商不支持 SSL

javascript - 加载时网页未完全缩小

javascript - 向 tbody 添加滚动条后如何将 tbody 与 thead 对齐(显示 : block)

javascript - Internet Explorer 10 Canvas 裁剪意外行为

javascript - 如何使用 Chrome 扩展修改网站元素

css - 让 Div 仅在页面滚动时出现