table-layout



значения свойства:


  • auto
  • fixed
  • inherit



css/style.css
  • table, td{
  •  border: 1px solid #00F;
  •  font-size: 24px;
  •  border-collapse: collapse;
  • }
  •  
  • table {
  •  width: 600px;
  • }
  •  
  • #t1 {
  •  table-layout: auto;
  • }
table, td{
 border: 1px solid #00F;
 font-size: 24px;
 border-collapse: collapse;
}

table {
 width: 600px;
}

#t1 {
 table-layout: auto;
}


index.html
  • <!DOCTYPE html>
  • <html>
  • <head>
  •  <meta charset="utf-8" />
  •  <title>New Page</title>
  •  <link href="css/style.css" rel="stylesheet" />
  •  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  • </head>
  • <body>
  •  <table id="t1">
  •   <tr>
  •    <td>To be or not to be?</td>
  •    <td>Hello World!</td>
  •   </tr>
  •   <tr>
  •    <td>Быть или не быть?</td>
  •    <td>Привет Мир!</td>
  •   </tr>
  •  </table>
  •  <br />
  •  <br />
  •  <table id="t2">
  •   <tr>
  •    <td>To be or not to be?</td>
  •    <td>Hello World!</td>
  •   </tr>
  •   <tr>
  •    <td>Быть или не быть?</td>
  •    <td>Привет Мир!</td>
  •   </tr>
  •  </table>
  •  <br />
  •  <br />
  •  <table id="t3">
  •   <tr>
  •    <td>To be or not to be?</td>
  •    <td>Hello World!</td>
  •   </tr>
  •   <tr>
  •    <td>Быть или не быть?</td>
  •    <td>Привет Мир!</td>
  •   </tr>
  •  </table>
  • <script>
  •  /*JavaScript*/
  •  document.getElementById("t2").style.tableLayout="fixed";
  •  /*jQuery*/
  •  $(document).ready(function() {
  •   $("#t3").css({ "table-layout": "fixed" });
  •  });
  • </script>
  • </body>
  • </html>
  • <!DOCTYPE html>
  • <html>
  • <head>
  •  <meta charset="utf-8" />
  •  <title>New Page</title>
  •  <link href="css/style.css" rel="stylesheet" />
  •  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  • </head>
  • <body>
  •  <table id="t1">
  •   <tr>
  •    <td>To be or not to be?</td>
  •    <td>Hello World!</td>
  •   </tr>
  •   <tr>
  •    <td>Быть или не быть?</td>
  •    <td>Привет Мир!</td>
  •   </tr>
  •  </table>
  •  <br />
  •  <br />
  •  <table id="t2">
  •   <tr>
  •    <td>To be or not to be?</td>
  •    <td>Hello World!</td>
  •   </tr>
  •   <tr>
  •    <td>Быть или не быть?</td>
  •    <td>Привет Мир!</td>
  •   </tr>
  •  </table>
  •  <br />
  •  <br />
  •  <table id="t3">
  •   <tr>
  •    <td>To be or not to be?</td>
  •    <td>Hello World!</td>
  •   </tr>
  •   <tr>
  •    <td>Быть или не быть?</td>
  •    <td>Привет Мир!</td>
  •   </tr>
  •  </table>
  • <script>
  •  /*JavaScript*/
  •  document.getElementById("t2").style.tableLayout="fixed";
  •  /*jQuery*/
  •  $(document).ready(function() {
  •   $("#t3").css({ "table-layout": "fixed" });
  •  });
  • </script>
  • </body>
  • </html>