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

Question

I'm working on a simple webpage which interacts with a database to retrieve flights to and from places specified by the user. The problem that I'm having is with displaying the flights on the front-end using HTML and CSS. I'm not sure if there is a better way to phrase the title of this question. I have a HTML table which I am using as a sort bar. The code for that is below along with the stylesheet nodes describing the tr element:

<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;
}

On top of this, I have HTML to describe the data elements of the table. Below is one such snippet.

<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>

The problem that I am facing is that I want to make the width of the Departure time column title exactly the same as the corresponding data element. I don't think making the width of the Departure time element 100% is a viable option for me. Is there a way for me to inherit the width of the data element and set the Departure time column title accordingly?

Answer 1

If your "sort bar" and your "data elements" are in different tables, and you want the Departure Time column's width to correspond to its data cell's width, you'll have to use javascript. You'd do something like this:

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;

If you can only use CSS, the best you can do is enforce the same width for both cells by setting them to the same value in the CSS. You can't use "inherit" here because the cells don't have a parent-child relationship.

Answer 2

From what I understand, you have 2 columns in 2 tables, and you want them of the same width.

And of course, you want them to be of the smallest width possible.

First option: fixed width for both columns.

Second option: merge the 2 tables into one

Third option: use Javascript to set the column width.

DepartureColTitle.width() = DepartureColData.width()

The third option is the only way to get a width from an element in a page and apply it to another unrelated element.