javascript - 从 HTML 页面上的另一个元素继承宽度

Question

我正在开发一个简单的网页，该网页与数据库交互以检索往返于用户指定地点的航类。我遇到的问题是使用 HTML 和 CSS 在前端显示航类。我不确定是否有更好的方式来表达这个问题的标题。我有一个 HTML 表格，用作排序栏。下面的代码以及描述 tr 元素的样式表节点:

<tr>
    <td class="xp-flt-sortbar-label" id="flightSortByLabel">
        Sort by:
    /td>

    <td onclick="sortInPlace('1');" class="xp-flt-sortbar-col1" id="sortType1">
        <span class="flightSortShowPointer">
            Departure Time
        </span>
    </td>

    <td onclick="sortInPlace('2');" class="xp-flt-sortbar-col2" id="sortType2">
        <span class="flightSortShowPointer">
            Arrival Time
        </span>
    </td>       
</tr>

<!--Stylesheet-->
#flightResultsSortDiv .xp-flt-sortbar-col1 {
    padding-left: 6px;
    text-align: left;
    width: 100px;
}
#flightResultsSortDiv .xp-flt-sortbar-col2 {
    padding-left: 0;
    text-align: left;
    width: 128px;
}

除此之外，我还有 HTML 来描述表格的数据元素。下面是一个这样的片段。

<tr class="xp-flt-ctyttl-fnt" name="from2City">
    <td colspan="2" class="flightLegSummary"><span id="departureCity0">Seattle</span></td>
    <td colspan="2"><span id="arrivalCity0">Newark</span></td>
</tr>

我面临的问题是我想让 Departure time 列标题的宽度与相应的数据元素完全相同。我认为将出发时间元素的宽度设置为 100% 对我来说不是一个可行的选择。有没有办法让我继承数据元素的宽度并相应地设置出发时间列标题？

Answer 1

如果您的“排序栏”和“数据元素”位于不同的表中，并且您希望出发时间列的宽度与其数据单元格的宽度相对应，则必须使用 javascript。你会做这样的事情:

HTML:

<table>
<tr>
  <td id="dt">Departure Time</td>
</tr>
</table>

<table>
<tr>
  <td id="dc">data that is presumably longer than Departure Time</td>
</tr>
</table>

Javascript:

document.getElementById("dt").width = document.getElementById("dc").offsetWidth;
/* Now "dt" is a few pixels wider than "dc", so compensate by setting "dc"'s width to "dt"'s */
document.getElementById("dc").width = document.getElementById("dt").width;

如果您只能使用 CSS，最好的办法是通过在 CSS 中将两个单元格设置为相同的值来强制它们使用相同的宽度。你不能在这里使用“继承”，因为单元格没有父子关系。