Question

我有一张由样式表控制的表格。这张桌子是用我的老板想要的海报制作的。我遇到的问题是在海报上，两列之间存在差距。

我尝试过将两张桌子并排放置但是如果在移动设备上查看这会导致我出现问题，所以我尝试添加一个左右边框和与页面其余部分相同颜色背景的列但我无法摆脱样式表中的顶部/底部边框。

样式表。

.table__container {
  overflow-x: scroll;
  height: 100%;
  width: 100%;
}
table {
  border-collapse: collapse;
}
tr {
  border-bottom: 0px dashed #DDD;
}
table tr th {
  color: #88B53D;
}
table tr th, table tr td {
  vertical-align: top;
}
.row__header {
  border-top: 3px solid #DDD;
}
.row__header--day {
  font-size: 1em;
  text-transform: uppercase;
}

页面上的CSS

.nothing {
        border-left: 1px solid #DDD;
        border-right: 1px solid #DDD;
        border-top: 0px;
        border-bottom: 0px;
        background-color: #eee;
    }

HTML表格

<div class="table__container">
                <table width="100%">
                    <tr>
                        <th></th>
                        <th></th>
                        <th></th>
                        <td class="nothing">Gap should be here</td>
                        <th></th>
                        <th></th>
                        <th></th>
                        <th></th>
                    </tr>
                    <tr class="row__header" style="text-align:center;">
                        <th class="row__header--day"></th>
                        <td></td>
                        <td></td>
                        <td class="nothing">Gap should be here</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                </table>
            </div>

样式表是作为我们品牌的一部分提供给我的，所以我不能把它搞得太多。

Answer 1

这是预期的结果吗？如果是，那么我将添加一些解释。

＆＃13;

.table__container {
  height: 100%;
  width: 100%;
}

table tr td.gap{
  width:40%;
  text-align:center;
  border:none;
}

table tr td{
  border:1px solid #000
}

＆＃13;

<div class="table__container">
    <table width="100%">
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td class="gap"></td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td class="gap"></td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
    </table>
</div>

＆＃13;

使一个表看起来像两个表

1 个答案: