How to fix a table width

Question

enter image description hereSuppose I have a table with two columns

<table>

<tr><td>Email</td> <td></td></tr>
<tr><td>Full name</td> <td></td></tr>

</table>

I want to fix the table width to a maximum size so that, whatever I write in the second column, the table will not expand more than the fixed size. Rather it will expand its height automatically to keep the big text in its area which is written in the second column. How can this be done?

When I write something big, it looks like the uploaded picture. But I want it to expand vertically, not horizontally.

http://stackoverflow.com/questions/4457506/set-the-table-column-width-constant-regardless-of-the-amount-of-text-in-its-cell — Ankur Jyoti Phukan, Mar 22 '17 at 04:55
Possible duplicate of [Set the table column width constant regardless of the amount of text in its cells?](http://stackoverflow.com/questions/4457506/set-the-table-column-width-constant-regardless-of-the-amount-of-text-in-its-cell) — Ankur Jyoti Phukan, Mar 22 '17 at 04:56
Yes, I searched. Max-width property does not fulfill my requirements. Though I used max-width, the table expands horizontally. But I want it vertically expanding. — Nahid Sultan, Mar 22 '17 at 04:56

score 0 · Answer 1 · answered Mar 22 '17 at 04:55

0

You can use like that this:

.table-container {
max-width:800px;
width:100%;
}
.table-container table {
width:100%
}

<div class="table-container">
<table>

<tr><td>Email</td> <td></td></tr>
<tr><td>Full name</td> <td></td></tr>

</table>
</div>

answered Mar 22 '17 at 04:55

Awadhesh verma

530
4
10

This is not working. The table keeps expanding horizontally. But what I want is, the table will not expand more than a fixed pixel (something like 200 px). If it needs to expand, it will increase its height. – Nahid Sultan Mar 22 '17 at 05:07

score 0 · Accepted Answer · edited Mar 22 '17 at 05:53

0

Try this code

table {
  width: 100%;
  max-width:200px;
  table-layout: fixed;
  border-collapse: collapse;
      }

table {
    table-layout: fixed;
    width:100%;
    max-width:200px;
    border-collapse: collapse;
}
.wrapper{
   max-width:200px;
}
table td.last {
    width: 150px;
    word-break: break-all;
    }
table td{
   border: 1px solid #CCCCCC;
    }  
    
    table td, table th {
    border: 1px solid #CCCCCC;
    text-align: center;
    font-family: open sans;
    font-size: 14px;
    font-weight: 400;
    color: #666666;
}

<div class="wrapper">
<table>
<tbody>
<tr><td>Email</td> <td class="last">sdfdsffdsfsdfsdf</td></tr>
<tr><td>Full name</td> <td class="last">sdffdsfsdfssssssssssssssssssss</td></tr>
</tbody>
</table>
   </div>

edited Mar 22 '17 at 05:53

Alfin Paul

1,543
14
26

answered Mar 22 '17 at 04:58

Amal

3,398
1
12
20

This is not working. The table keeps expanding horizontally. But what I want is, the table will not expand more than a fixed pixel (something like 200 px). If it needs to expand, it will increase its height. – Nahid Sultan Mar 22 '17 at 05:07
Oh, great!! That is what I was searching for. Thank you very much. – Nahid Sultan Mar 22 '17 at 05:42
Glad to help you..:) – Amal Mar 22 '17 at 06:16

score 0 · Answer 3 · edited Mar 22 '17 at 06:41

0

<table>
    <tr><td>Email</td> <td style="max-width: maxSize"></td></tr>
    <tr><td>Full name</td > < td style="max-width: maxSize"></td></tr>        
</table>

edited Mar 22 '17 at 06:41

Hakan Fıstık

16,800
14
110
131

answered Mar 22 '17 at 05:07

Ramesh Kharbuja

407
2
8

score 0 · Answer 4 · edited May 23 '17 at 12:00

please use style="word-wrap: break-word" in your td tag

or you can refer this community question.

Word-wrap in an HTML table

Example: Enter Your Values in Second Column.

<!DOCTYPE html>
<html>
 <head> </head>
<body>
  <table style="table-layout: fixed; width: 100%" style="word-wrap: break-word">
  

 <tr><td>Email</td> <td style="word-wrap: break-word">Hello Column1 Hello Column1 Hello Column1 Hello Column1 Hello Column1 Hello Column1</td></tr>
 <tr><td>Full name</td> <td style="word-wrap: break-word">Hello Column</td></tr>

</table>
</table>

</body>
</html>

score 0 · Answer 5 · answered Mar 22 '17 at 06:07

<table >
  <thead class="">
    <tr>
      <th width="60%"></th>
      <th width="20%"></th>
      <th width="20%"></th>
    </tr>
    <tr>
      <th class="numeric">Name</th>
      <th class="numeric">Code</th>
      <th class="numeric">Fee</th>
    </tr>
  </thead>
</table>

How to fix a table width

5 Answers5