locked
Cant set table <td> width RRS feed

  • Question

  • User1324715958 posted

    I cant set the width for td in a table:

    .td-high-score {
        width: 30%;
        table-layout: fixed;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    <table>
                        <!--Row Header-->
                        <tr>
                            <td class="td-high-score">Game Name</td>
                            <td class="td-high-score">Score</td>
                            <!--Change To Handle Before Going Live-->
                            <td class="td-high-score">Email</td>
                        </tr>
                    </table>

    Thursday, June 6, 2019 2:58 AM

Answers

  • User409696431 posted

    The attribute table-layout is applied to the table, not to the td, and the table needs a width.

    If you want to see the ellipsis when the cells in rows below the first one have content that overflows the widths determined by the cells in the first row, you need to add white-space: nowrap to the td style.

    .td-high-score{
        width: 30%;
        white-space:nowrap;   
        overflow: hidden;
        text-overflow: ellipsis;
    }
    table {
     table-layout: fixed;
     width: 100%;
    }
    

    I've styled "table" - you probably want to define a class for this and apply it to the table if you don't want all tables to behave this way.  And, of course use whatever width you need, where I have simply put 100%.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, June 6, 2019 4:25 AM

All replies

  • User409696431 posted

    The attribute table-layout is applied to the table, not to the td, and the table needs a width.

    If you want to see the ellipsis when the cells in rows below the first one have content that overflows the widths determined by the cells in the first row, you need to add white-space: nowrap to the td style.

    .td-high-score{
        width: 30%;
        white-space:nowrap;   
        overflow: hidden;
        text-overflow: ellipsis;
    }
    table {
     table-layout: fixed;
     width: 100%;
    }
    

    I've styled "table" - you probably want to define a class for this and apply it to the table if you don't want all tables to behave this way.  And, of course use whatever width you need, where I have simply put 100%.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, June 6, 2019 4:25 AM
  • User1324715958 posted

    Width is still not working right:

    <table class="table-high-scores">
                        <!--Row Header-->
                        <tr>
                            <td class="td-high-score">Game Name</td>
                            <td class="td-high-score">Score</td>
                            <td class="td-high-score">Email</td>
                        </tr>
                        <tr>
                            <td class="td-high-score">Game Name</td>
                            <td class="td-high-score">Score</td>
                            <td class="td-high-score">Email</td>
                        </tr>
                    </table>
    .table-high-scores {
        table-layout: fixed;
        width: 100%;
    }
    
    .td-high-score {
        width: 33%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }


    Thursday, June 6, 2019 4:49 AM
  • User1324715958 posted

    never mind working now

    Thursday, June 6, 2019 4:51 AM