html - 如何使div表的列在整个长度上拉伸(stretch)？

有以下问题。我需要创建一个表，其中的列将跨越div块容器的整个长度，因此它看起来像这样：



但是，我目前所拥有的是这样的：



我使用的代码是：

  <div class="widgetright">
     <div class="widgettext">
     <b>This free independent travel guide to Russia</b> exists thanks to the commission we get when you order these <b>hand-picked trusted third-party services</b> or when you <b><a href="/book/">buy our book</a></b>. Please, support us!
     </div>
     &nbsp;<br>
     <div class="widgetable">
     <div class="widgetrow">
     <div class="widgetbars"><span class="centerer"></span><a href="/Travel/VisaSupport.html">russian visa</a></div><div class="gapper">           </div>
     <div class="widgetbars"><span class="centerer"></span><a href="/Services/TrainTickets.html">train tickets</a></div>
     </div>
     <div class="vertgapper"></div>
     <div class="widgetrow">
     <div class="widgetbars"><span class="centerer"></span><a href="/book/">guide book</a></div><div class="gapper"></div>
     <div class="widgetbars"><span class="centerer"></span><a href="/Services/Accommodation.html">hotels</a></div>
     </div>
     <div class="vertgapper"></div>
     <div class="vertgapper"></div>
     <div class="vertgapper"></div>
     <div class="vertgapper"></div>
     </div>

和的CSS是：

.widgetright {
    border-bottom: 1px solid #b7b7b7;
}
.widgettext {
    font-size: 16px;
    font-family: Arial, Helvetica, sans-serif;
}

.widgettext a{
    text-decoration: none;
    color: #333;
}

.widgettable {
    position: relative;
    width: 100%;
    display: table;
    border-collapse: separate;
    border-spacing: 20px;

}

.widgetrow {
    position: relative;
    width: 100%;
    display:table-row;

}
.widgetbars {
    width: 40%;
    height: 32px;
    background-color: #dfdfdf;
    display:table-cell;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
    -ms-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
    text-align: center;
    color: #333;
    font-size: 16px;
    font-family: Arial, Helvetica, sans-serif;

}

.widgetbars a {
    color: #333;
}

.widgetbars a:hover {
    color: #02aace;
    text-decoration: underline;

}

.centerer {
    display: inline-block;
    height: 100%;
    vertical-align: middle;

}

.gapper {
    display: table-cell;
    width: 20px;
}
.vertgapper {
    display:table-row;

    height: 10px;

}

谢谢！

最佳答案

您需要将display:table添加到.widgetable。

由于您使用的是表行，因此在父元素上使用表有助于模仿表结构。

添加完之后，只需进行快速拼写修复-您就在CSS中有widgettable（带有两个T），在实际元素上有一个名为widgetable（带有一个T）的类。

.widgetright {
    border-bottom: 1px solid #b7b7b7;
}
.widgettext {
    font-size: 16px;
    font-family: Arial, Helvetica, sans-serif;
}

.widgettext a{
    text-decoration: none;
    color: #333;
}

.widgetable {
    position: relative;
    width: 100%;
    display: table;
    border-collapse: separate;
    border-spacing: 20px;
    display:table;
}

.widgetrow {
    position: relative;
    width: 100%;
    display:table-row;

}
.widgetbars {
    width: 40%;
    height: 32px;
    background-color: #dfdfdf;
    display:table-cell;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
    -ms-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
    text-align: center;
    color: #333;
    font-size: 16px;
    font-family: Arial, Helvetica, sans-serif;

}

.widgetbars a {
    color: #333;
}

.widgetbars a:hover {
    color: #02aace;
    text-decoration: underline;

}

.centerer {
    display: inline-block;
    height: 100%;
    vertical-align: middle;

}

.gapper {
    display: table-cell;
    width: 20px;
}
.vertgapper {
    display:table-row;

    height: 10px;

}

<div class="widgetright">
     <div class="widgettext">
     <b>This free independent travel guide to Russia</b> exists thanks to the commission we get when you order these <b>hand-picked trusted third-party services</b> or when you <b><a href="/book/">buy our book</a></b>. Please, support us!
     </div>
     &nbsp;<br>
     <div class="widgetable">
     <div class="widgetrow">
     <div class="widgetbars"><span class="centerer"></span><a href="/Travel/VisaSupport.html">russian visa</a></div><div class="gapper">           </div>
     <div class="widgetbars"><span class="centerer"></span><a href="/Services/TrainTickets.html">train tickets</a></div>
     </div>
     <div class="vertgapper"></div>
     <div class="widgetrow">
     <div class="widgetbars"><span class="centerer"></span><a href="/book/">guide book</a></div><div class="gapper"></div>
     <div class="widgetbars"><span class="centerer"></span><a href="/Services/Accommodation.html">hotels</a></div>
     </div>
     <div class="vertgapper"></div>
     <div class="vertgapper"></div>
     <div class="vertgapper"></div>
     <div class="vertgapper"></div>
     </div>