如果存在 div，则两个 HTML 表格的对齐问题[重复]答案

【问题标题】：Alignment Issue Of Two HTML tables if div is present [duplicate]如果存在 div，则两个 HTML 表格的对齐问题[重复]
【发布时间】：2019-01-04 08:12:12
【问题描述】：

<table style="text-align: left;width: 100%; float:left" cellpadding="0" cellspacing="1" border="1">    
        <tr>
            <th style="width:25%">head</th>
            <th style="width:25%">head</th>
            <th style="width:25%">head</th>
            <th style="width:25%">head</th>
        </tr>    
</table>
 <div style="height:100px; overflow-y:scroll; width:100%; float:left;">
<table style="text-align: left;width: 100%; float:left" cellpadding="0" cellspacing="1" border="1">    
    <tbody>
        <tr>
            <td style="width:25%">row</td>
            <td style="width:25%">row</td>
            <td style="width:25%">row</td>
            <td style="width:25%">row</td>
        </tr>
        <tr>
            <td>row</td>
            <td>row</td>
            <td>row</td>
            <td>row</td>
        </tr>
        <tr>
            <td>row</td>
            <td>row</td>
            <td>row</td>
            <td>row</td>
        </tr>
        <tr>
            <td>row</td>
            <td>row</td>
            <td>row</td>
            <td>row</td>
        </tr>
        <tr>
            <td>row</td>
            <td>row</td>
            <td>row</td>
            <td>row</td>
        </tr>   
        <tr>
            <td>row</td>
            <td>row</td>
            <td>row</td>
            <td>row</td>
        </tr>
        <tr>
            <td>row</td>
            <td>row</td>
            <td>row</td>
            <td>row</td>
        </tr>
        <tr>
            <td>row</td>
            <td>row</td>
            <td>row</td>
            <td>row</td>
        </tr> 
    </tbody>
</table>
</div>

在上面的代码中，我得到了 2 个 html 表格

表 1：对于标题

表 2：用于正文

对于表 2，我保留了一个用于滚动的 div，这是我的要求。

当这个 div 存在对齐问题时，如果我删除 div，那么两个表对齐都是完美的

你能帮我解决这个问题吗？

【问题讨论】：

标签： html html-table

【解决方案1】：

// Change the selector if needed
var $table = $('table.scroll'),
    $bodyCells = $table.find('tbody tr:first').children(),
    colWidth;

// Adjust the width of thead cells when window resizes
$(window).resize(function() {
    // Get the tbody columns width array
    colWidth = $bodyCells.map(function() {
        return $(this).width();
    }).get();
    
    // Set the width of thead columns
    $table.find('thead tr').children().each(function(i, v) {
        $(v).width(colWidth[i]);
    });    
}).resize(); // Trigger resize handler

table.scroll {
    width: 100%; /* Optional */
    /* border-collapse: collapse; */
    border-spacing: 0;
    border: 2px solid black;
}

table.scroll tbody,
table.scroll thead { display: block; }

thead tr th { 
    height: 30px;
    line-height: 30px;
    /*text-align: left;*/
}

table.scroll tbody {
    height: 100px;
    overflow-y: auto;
    overflow-x: hidden;
}

tbody { border-top: 2px solid black; }

tbody td, thead th {
    width: 20%; /* Optional */
    border-right: 1px solid black;
}

tbody td:last-child, thead th:last-child {
    border-right: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<table class="scroll">
    <thead>
        <tr>
            <th>Head 1</th>
            <th>Head 2</th>
            <th>Head 3</th>
            <th>Head 4</th>
            <th>Head 5</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Content 1</td>
            <td>Content 2</td>
            <td>Content 3</td>
            <td>Content 4</td>
            <td>Content 5</td>
        </tr>
        <tr>
            <td>Content 1</td>
            <td>Lorem ipsum dolor sit amet.</td>
            <td>Content 3</td>
            <td>Content 4</td>
            <td>Content 5</td>
        </tr>
        <tr>
            <td>Content 1</td>
            <td>Content 2</td>
            <td>Content 3</td>
            <td>Content 4</td>
            <td>Content 5</td>
        </tr>
        <tr>
            <td>Content 1</td>
            <td>Content 2</td>
            <td>Content 3</td>
            <td>Content 4</td>
            <td>Content 5</td>
        </tr>
        <tr>
            <td>Content 1</td>
            <td>Content 2</td>
            <td>Content 3</td>
            <td>Content 4</td>
            <td>Content 5</td>
        </tr>
        <tr>
            <td>Content 1</td>
            <td>Content 2</td>
            <td>Content 3</td>
            <td>Content 4</td>
            <td>Content 5</td>
        </tr>
        <tr>
            <td>Content 1</td>
            <td>Content 2</td>
            <td>Content 3</td>
            <td>Content 4</td>
            <td>Content 5</td>
        </tr>
    </tbody>
</table>

来源：

HTML table with 100% width, with vertical scroll inside tbody http://jsfiddle.net/hashem/CrSpu/554/

【讨论】：

【解决方案2】：

您可以在表 1 中再添加 1 个 div 并设置一个边距

<div style="margin-right: 15px;">
<table style="text-align: left;width: 100%; float:left;" cellpadding="0" cellspacing="1" border="1">    
        <tr>
            <th style="width:25%">head</th>
            <th style="width:25%">head</th>
            <th style="width:25%">head</th>
            <th style="width:25%">head</th>
        </tr>    
</table>
</div>
 <div style="height:100px; overflow-y:scroll; width:100%; float:left;">
<table style="text-align: left;width: 100%; float:left" cellpadding="0" cellspacing="1" border="1">    
    <tbody>
        <tr>
            <td style="width:25%">row</td>
            <td style="width:25%">row</td>
            <td style="width:25%">row</td>
            <td style="width:25%">row</td>
        </tr>
        <tr>
            <td>row</td>
            <td>row</td>
            <td>row</td>
            <td>row</td>
        </tr>
        <tr>
            <td>row</td>
            <td>row</td>
            <td>row</td>
            <td>row</td>
        </tr>
        <tr>
            <td>row</td>
            <td>row</td>
            <td>row</td>
            <td>row</td>
        </tr>
        <tr>
            <td>row</td>
            <td>row</td>
            <td>row</td>
            <td>row</td>
        </tr>   
        <tr>
            <td>row</td>
            <td>row</td>
            <td>row</td>
            <td>row</td>
        </tr>
        <tr>
            <td>row</td>
            <td>row</td>
            <td>row</td>
            <td>row</td>
        </tr>
        <tr>
            <td>row</td>
            <td>row</td>
            <td>row</td>
            <td>row</td>
        </tr> 
    </tbody>
</table>
</div>

【讨论】：