CODEWITHSUNDEEP
htmlhtml-table
SIDU
SIDU

Reputation: 2278

How to make an HTML table fixed width when resize page

My HTML table width is unknown, and I want to make it fixed width for each td

table-layout=fixed is working if I set the width of table. However my situation is that the table width is unknown:

<table style="border:solid 1px #333;table-layout:fixed">
  <tr>
    <td style="width:200px">200</td>
    <td style="width:300px">300</td>
  </tr>
  <tr>
    <td><input style="width:100%"></td>
    <td><input style="width:100%"></td>
  </tr>
</table>

Above example is working beautiful if my browser page width is bigger than 500px, however when I resize page, I need the tds stay at fixed with.

If there is no input inside td the following will work:

<table style="table-layout:fixed">
  <tr>
    <td style="min-width:200px">

However there is an input inside td

The following is working version, each time resize td, need update table width:

<table style="table-layout:fixed;width:500px">
  <tr>
    <td style="min-width:200px">

Well, I finally found it working this way: min-width + size=1 working :)

<table style="table-layout:fixed">
  <tr>
    <td style="min-width:200px">header</td>
  </tr>
  <tr>
    <td><input size="1"></td>
  </tr>

https://jsfiddle.net/7nttub0b/3/

Upvotes: 0

Views: 2426

Answers (4)

coskukoz
coskukoz

Reputation: 332

Try this code

<table style="border:solid 1px #333;table-layout:auto">
   <tr>
     <td style="width:200px">200</td>
     <td style="width:300px">300</td>
  </tr>
</table>

Upvotes: 0

user2362008
user2362008

Reputation: 51

<table border="1" width="500px">
  <tr>
    <td style="width:200px">200</td>
    <td style="width:300px">300</td>
  </tr>
</table>

Upvotes: 0

user6995829
user6995829

Reputation:

Try doing this: <table style="border:solid 1px #333; table-layout:fixed" width="400">

Upvotes: 0

Bhagwan Thapa
Bhagwan Thapa

Reputation: 61

This might work if you want fixed sized td:

<table style="border:solid 1px #333;table-layout:fixed">
  <tr>
    <td style="min-width:200px">200</td>
    <td style="min-width:300px">300</td>
  </tr>
</table>

Upvotes: 2

Related Questions