Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://webplatform.github.io/docs/css/properties/table-layout below:

table layout · WebPlatform Docs

The ‘table-layout’ property controls the algorithm used to lay out the table cells, rows, and columns.

Initial value

auto

Applies to

Table and inline-table elements

Inherited

No

Media

visual

Computed value

As specified

Animatable

No

CSS Object Model Property

object.style.tableLayout

• table-layout: auto
• table-layout: fixed
• table-layout: inherit

auto

Default. Column width is set by the widest unbreakable content in the column cells. The width of the table and its cells depends on the content of the cells.

fixed

Table and column widths are set by the widths of table and col elements or by the width of the first row of cells. It does not depend on the content of the cells. Rendering is faster as the user agent can begin to lay out the table once the entire first row has been received. Cells in subsequent rows do not affect column widths.

inherit

This features inherits table-layout property from the parent element.

This example shows table-layout ‘auto’ and 'fixed’. With 'auto’, the column stretches to encompass the largest unbreakable element. With 'fixed’, the column gets the defined width, even though the content might not fit.

<p><strong>table-layout: auto</strong></p>
<table border="1">
    <tr>
        <td class="first"><p>cell 1, Lorem ipsum</p></td>
        <td><p>cell 2</p></td>
    </tr>
    <tr>
        <td><p>cell 3, Suspendisse in elit lectus.</p></td>
        <td><p>cell 4</p></td>
    </tr>
</table>

<p><strong>table-layout: fixed</strong></p>
<table border="1" class="fixed">
    <tr>
        <td class="first"><p>cell 1, Lorem ipsum</p></td>
        <td><p>cell 2</p></td>
    </tr>
    <tr>
        <td><p>cell 3, Suspendisse in elit lectus.</p></td>
        <td><p>cell 4</p></td>
    </tr>
</table>

<p><strong>table-layout: fixed with overflow set to hidden</strong></p>
<table border="1" class="fixed2">
    <tr>
        <td class="first"><p>cell 1, Lorem ipsum</p></td>
        <td><p>cell 2</p></td>
    </tr>
    <tr>
        <td><p>cell 3, Suspendisse in elit lectus.</p></td>
        <td><p>cell 4</p></td>
    </tr>
</table>

View live example

Here’s the CSS for styling the table, above.

table {
    border-color: #F00;
    width: 400px;
    table-layout: auto; 
}
table.fixed,
table.fixed2 {
    table-layout: fixed;
}
td {
    border-color: #00F;
}
td.first {
    width: 50px;
}
table.fixed2 td {
    overflow: hidden;
}
p {
    margin: 15px 0 3px 0;
}
td p {
    margin: 3px;
}

View live example

• When using 'table-layout: fixed’, authors should not omit columns from the first row. If a subsequent row has more columns than the greater of the number determined by the table-column elements and the number determined by the first row, then additional columns may not be rendered.
• If 'table-layout: fixed’, any cell that has content that overflows uses the overflow property to determine whether to clip the overflow content.

CSS2.1, 17.5.2 Table width algorithms: the ‘table-layout’ property

W3C Recommendation

• Microsoft Developer Network: [Windows Internet Explorer API reference Article]

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4