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>

我面临的问题是我想让出发时间列标题的宽度与相应的数据元素完全相同。我不认为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中将它们设置为相同的值来为两个单元格强制执行相同的宽度。你不能在这里使用“继承”，因为单元格没有父子关系。

Answer 2

根据我的理解，您在2个表中有2列，并且您希望它们具有相同的宽度。

当然，您希望它们具有尽可能小的宽度。

第一个选项：两列的固定宽度。

第二个选项：将2个表合并为一个

第三个选项：使用Javascript设置列宽。

DepartureColTitle.width（）= DepartureColData.width（）

第三个选项是从页面中的元素获取宽度并将其应用于另一个无关元素的唯一方法。

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

2 个答案: