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

【问题标题】：Inherit width from another element on HTML page从 HTML 页面上的另一个元素继承宽度
【发布时间】：2011-06-10 04:37:32
【问题描述】：

我正在开发一个简单的网页，该网页与数据库交互以检索往返于用户指定地点的航班。我遇到的问题是使用 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 来描述表格的数据元素。下面是一个这样的sn-p。

<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% 对我来说是一个可行的选择。有没有办法让我继承数据元素的宽度并相应地设置出发时间列标题？

【问题讨论】：

我很感激您没有将大量标记倾倒到问题中，但是如果没有看到您的 2 个代码 sn-ps 之间的确切关系，就很难理解您的意思。它们都是同一张桌子的一部分吗？
@Andrew 为了简洁起见，我想让我的代码尽可能简单。让我尝试编辑它以包含更多代码。它们是不同表的一部分。

标签： javascript html css dom stylesheet

【解决方案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 中将它们设置为相同的值来强制两个单元格的宽度相同。此处不能使用“继承”，因为单元格没有父子关系。

【讨论】：

【解决方案2】：

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

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

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

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

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

DepartureColTitle.width() = DepartureColData.width()

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

【讨论】：