发表新帖
发表新帖

Better way to right align text in HTML Table

前端 未结
关注
11 2081
无人及你
无人及你 2021-02-04 23:40

I have an HTML table with large number of rows, and I need to right align one column.

I know the following ways, 

..
相关标签:
11条回答
  • 星月不相逢
    2021-02-05 00:02

    A number of years ago (in the IE only days) I was using the <col align="right"> tag, but I just tested it and and it seems to be an IE only feature:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Test</title>
</head>
<body>
    <table width="100%" border="1">
        <col align="left" />
        <col align="left" />
        <col align="right" />
        <tr>
            <th>ISBN</th>
            <th>Title</th>
            <th>Price</th>
        </tr>
        <tr>
            <td>3476896</td>
            <td>My first HTML</td>
            <td>$53</td>
        </tr>
    </table>
</body>
</html>

    The snippet is taken from www.w3schools.com. Of course, it should not be used (unless for some reason you really target the IE rendering engine only), but I thought it would be interesting to mention it.

    Edit:

    • IE still supports it.
    • Firefox has dropped support in 3.5.
    • Safari does not seem to support it, but the documentation indicates otherwise.

    Overall, I don't understand the reasoning behing abandoning this tag. It would appear to be very useful (at least for manual HTML publishing).

    0 讨论(0)
  • 轻奢々
    2021-02-05 00:05

    The <colgroup> and <col> tags that lives inside tables are designed for this purpose. If you have three columns in your table and want to align the third, add this after your opening <table> tag:

     <colgroup>
     <col />
     <col />
     <col class="your-right-align-class" />
 </colgroup>

    along with the requisite CSS:

     .your-right-align-class { text-align: right; }

    From the W3:

    Definition and Usage

    • The <col> tag defines attribute values for one or more columns in a table.

    • The <col> tag is useful for applying styles to entire columns, instead of repeating the styles for each cell, for each row.

    0 讨论(0)
  • 日久生厌
    2021-02-05 00:14

    If it's always the third column, you can use this (assuming table class of "products"). It's kinda hacky though, and not robust if you add a new column.

    table.products td+td+td {
  text-align: right;
}
table.products td,
table.products td+td+td+td {
  text-align: left;
}

    But honestly, the best idea is to use a class on each cell. You can use the col element to set the width, border, background or visibility of a column, but not any other properties. Reasons discussed here.

    0 讨论(0)
  • 梦毁少年i
    2021-02-05 00:15

    What you really want here is:

    <col align="right"/>

    but it looks like Gecko doesn't support this yet: it's been an open bug for over a decade.

    (Geez, why can't Firefox have decent standards support like IE6?)

    0 讨论(0)
  • 刺人心
    2021-02-05 00:15

    This doesn't work in IE6, which may be an issue, but it'll work in IE7+ and Firefox, Safari etc. It'll align the 3rd column right and all of the subsequent columns left.

    td + td + td { text-align: right; }
td + td + td + td { text-align: left; }
    0 讨论(0)
 看不清?
提交回复
热议问题