tableLayout Property - Javascript CSS Style Property

Javascript examples for CSS Style Property:tableLayout

  1. HOME
  2. Javascript
  3. CSS Style Property
  4. tableLayout

Description

The tableLayout property layouts elements like table cells, rows, and columns.

Property Values

Value Description
autoColumn width is set by the widest unbreakable content. Default.
fixed Column width is set by the width of table and columns(not the content)
initial Sets this property to its default value.
inherit Inherits this property from its parent element.

Technical Details

Item Value
Default Value: auto
Return Value: A String, representing the table layout algorithm used for a table
CSS VersionCSS2

Set a fixed table layout:

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
table, td {
    border: 1px solid black;
}

#myTABLE {//from  w ww.  j  a va  2  s.co  m
    width: 100%;
}
</style>
</head>
<body>

<table id="myTABLE" style="table-layout:fixed;">
  <tr>
    <td>1010101010101010101010101010</td>
    <td>10101010</td>
  </tr>
  <tr>
    <td>A</td>
    <td>S</td>
  </tr>
  <tr>
    <td>J</td>
    <td>D</td>
  </tr>
</table>
<br>

<button type="button" onclick="myFunction()">Return table layout</button>

<script>
function myFunction() {
    console.log(document.getElementById("myTABLE").style.tableLayout);
}
</script>

</body>
</html>

Related Tutorials