Question

我正在使用html表和css，我正在尝试为表添加边框，我添加了边框但显示边框宽度为100％，因为我使用的是display：block;

如果我更换display：block to display：inline-block the horizontalscroll bar display，可以删除水平条而不使用overflow-x：hidden

当我们添加更多td时，表示水平滚动条应位于静态div而不是窗口/屏幕下。

注意：无法在html中添加任何内容。我只能覆盖css。所以请它只能用css进行更改。

我在jsfiddle中添加了我的代码：clik here

对每个人来说都很简单，但我在这里很挣扎。

.static table {
    border-collapse: collapse;
    display: block;
    margin-bottom: 23px;
    overflow-x: auto;
    width: auto;
}
.static table tr {
    background-color: #E0E0E0;
}
.static table tr:nth-child(even) {
    background-color: #F1F1F1;
}
.static table tr:first-child td, .static table tr:first-child th {
    font-size: 16px;
    font-weight: 600;
    line-height: 26px;
    padding: 10px 16px;
}
.static td {
      min-width: 100px;
}

<div class="static">
    <table style="border: 1px solid black;">
        <tbody>
            <tr>
                <td style="border: 1px solid black;"><strong>Account Test</strong></td>
            </tr>
            <tr>
                <td style="border: 1px solid black;">&nbsp;</td>
                <td style="border: 1px solid black;"><strong>MAX</strong></td>
            </tr>
            <tr>
                <td style="border: 1px solid black;">MIN</td>
                <td style="border: 1px solid black;">5000</td>
            </tr>            
            <tr>
                <td style="border: 1px solid black;">abcd</td>
                <td style="border: 1px solid black;">acd</td>
                <td style="border: 1px solid black;">-</td>
            </tr>
            <tr>
                <td style="border: 1px solid black;">abcdy</td>
                <td style="border: 1px solid black;">4</td>
            </tr>
            <tr>
                <td style="border: 1px solid black;">abcdr</td>
                <td style="border: 1px solid black;">-</td>
            </tr>
        </tbody>
    </table>
</div>

我希望根据td调整表格边框宽度。也应该是块元素。

注意：我有更多tr和td，但我只添加了样本。

Answer 1

您可以将边框应用于tbody元素，而不是为表提供边框，而是可以相应地进行调整而无需进一步更改

<div class="static">
    <table>
        <tbody style="border: 1px solid black;">
            <tr>
                <td style="border: 1px solid black;"><strong>Account 
                Test</strong></td>
            </tr>
            <tr>
                <td style="border: 1px solid black;">&nbsp;</td>
                <td style="border: 1px solid black;"><strong>MAX</strong></td>
            </tr>
            <tr>
                <td style="border: 1px solid black;">MIN</td>
                <td style="border: 1px solid black;">5000</td>
            </tr>            
            <tr>
                <td style="border: 1px solid black;">abcd</td>
                <td style="border: 1px solid black;">acd</td>
                <td style="border: 1px solid black;">-</td>
            </tr>
            <tr>
                <td style="border: 1px solid black;">abcdy</td>
                <td style="border: 1px solid black;">4</td>
            </tr>
            <tr>
                <td style="border: 1px solid black;">abcdr</td>
                <td style="border: 1px solid black;">-</td>
            </tr>
        </tbody>
    </table>
</div>

Answer 2

从html分离css。将import sys from PyQt5.QtGui import QImage, QPixmap from PyQt5.QtWidgets import QApplication, QLabel class BugTest(QLabel): def __init__(self): super().__init__() self.setPixmap(QPixmap(200, 200)) self.show() app = QApplication(sys.argv) widget = BugTest() app.exec_()样式重写为

table

.static table {
  border-spacing: 0px;
  border-collapse: separate;
  border: 1px solid black;
}

.static table {
  border-spacing: 0px;
  border-collapse: separate;
  border: 1px solid black;
}

.static table tr {
  background-color: #E0E0E0;
}

.static table tr:nth-child(even) {
  background-color: #F1F1F1;
}

.static table tr:first-child td,
.static table tr:first-child th {
  font-size: 16px;
  font-weight: 600;
  line-height: 26px;
  padding: 10px 16px;
}

.static td {
  min-width: 100px;
}

Answer 3

快速修复显示内联块而不是块到您的表并删除overflow-x

<div class="static">
    <table style="border: 1px solid black;">
        <tbody>
            <tr>
                <td style="border: 1px solid black;"><strong>Account Test</strong></td>
            </tr>
            <tr>
                <td style="border: 1px solid black;">&nbsp;</td>
                <td style="border: 1px solid black;"><strong>MAX</strong></td>
            </tr>
            <tr>
                <td style="border: 1px solid black;">MIN</td>
                <td style="border: 1px solid black;">5000</td>
            </tr>            
            <tr>
                <td style="border: 1px solid black;">abcd</td>
                <td style="border: 1px solid black;">acd</td>
                <td style="border: 1px solid black;">-</td>
            </tr>
            <tr>
                <td style="border: 1px solid black;">abcdy</td>
                <td style="border: 1px solid black;">4</td>
            </tr>
            <tr>
                <td style="border: 1px solid black;">abcdr</td>
                <td style="border: 1px solid black;">-</td>
            </tr>
        </tbody>
    </table>
</div>

更新了小提琴http://jsfiddle.net/8ohv1o79/

Answer 4

border：1px纯黑色;

.static table {
  border: 1px solid black;
}

Answer 5

从表格中删除display: block - 这是一个矛盾：表格有display: table。

此外，您的行在所有行中都不包含相同数量的单元格，这是无效的HTML。要么像我在我的代码片段中那样添加emtpy单元格或使用colspans。

.static table {
    border-collapse: collapse;
    margin-bottom: 23px;
}
.static table tr {
    background-color: #E0E0E0;
}
.static table tr:nth-child(even) {
    background-color: #F1F1F1;
}
.static table tr:first-child td, .static table tr:first-child th {
    font-size: 16px;
    font-weight: 600;
    line-height: 26px;
    padding: 10px 16px;
}
.static td {
      min-width: 100px;
}

<div class="static">
    <table style="border: 1px solid black;">
        <tbody>
            <tr>
                <td style="border: 1px solid black;" colspan="3"><strong>Account Test</strong></td>
            </tr>
            <tr>
                <td style="border: 1px solid black;">&nbsp;</td>
                <td style="border: 1px solid black;" colspan="2"><strong>MAX</strong></td>
            </tr>
            <tr>
                <td style="border: 1px solid black;">MIN</td>
                <td style="border: 1px solid black;" colspan="2">5000</td>
            </tr>            
            <tr>
                <td style="border: 1px solid black;">abcd</td>
                <td style="border: 1px solid black;">acd</td>
                <td style="border: 1px solid black;">-</td>
            </tr>
            <tr>
                <td style="border: 1px solid black;">abcdy</td>
                <td style="border: 1px solid black;" colspan="2">4</td>
            </tr>
            <tr>
                <td style="border: 1px solid black;">abcdr</td>
                <td style="border: 1px solid black;" colspan="2">-</td>
            </tr>
        </tbody>
    </table>
</div>

Html表 - 使用css在表中添加边框

5 个答案: