Set table to 70% but td to 50%?

Question

I got this code:

<table>
    <tr>
        <td>PeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeter</td>
        <td>GriffinGriffinGriffinGriffinGriffinGriffin</td>
    </tr>
    <tr>
        <td>Lois</td>
        <td>Griffin</td>
    </tr>
</table>


table {
    margin: 0 auto;
    border-spacing: 15px;
    width: 70%;
    min-height: 250px;
}

td {
    padding: 10px;
    background-color: gray;
}

I want to set table to 70% of the total window width which I did. I also want the td to be 50% of the 70% inside the table, the td width should be static.

You can see the problem here

Create a fiddle. Don't link to sites. When that site is fixed, this question has no value. — random_user_name, May 13 '14 at 17:14
possible duplicate: http://stackoverflow.com/questions/1057574/html-td-wrap-text — andi, May 13 '14 at 17:20

score 2 · Accepted Answer · answered May 13 '14 at 17:16

2

The only reason your code wasn't working is due to the giant single string.

Add the below to cause it to break, and keep the correct width:

td {
    background-color: #808080;
    padding: 10px;
    width: 50%;
    max-width: 50%; /* to limit the width to 50% as well */
    word-break: break-all; /* cause any string that is too long to be broken so will fit */
}

Here's a fiddle for your reference: http://jsfiddle.net/9ftqy/

answered May 13 '14 at 17:16

random_user_name

25,694
7
76
115

Alright, thanks for the help, the problem is solved. I will mark your answer in 10min when I am allowed to. – user3604070 May 13 '14 at 17:18

score 1 · Answer 2 · answered May 13 '14 at 17:22

Set table-layout:fixed; to table and fix your problem

fiddle http://jsfiddle.net/S37BB/

new css

table {
    margin: 0 auto;
    border-spacing: 15px;
    width: 70%;
    min-height: 250px;
    table-layout:fixed;
}

td {
    padding: 10px;
    background-color: gray;
    width:50%;
    overflow:hidden;
}

html

<table>
    <tr>
        <td>PeterPeterPeterPeterPete rPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeter</td>
        <td>GriffinGriffinGriffinGriffinGriffinGriffin</td>
    </tr>
    <tr>
        <td>Lois</td>
        <td>Griffin</td>
    </tr>
</table>

score 0 · Answer 3 · answered May 13 '14 at 17:33

There are couple of things you should understand from your code...

TD width should always be fixed to 50% --- however normal tendency is re-size the cell per content which resides in it.

table { table-layout: fixed; }

td { width: 50%; }
You want to force cell content to wrap within provided space and not to overflow once #1 is completed.

td { word-wrap: break-word; }

Here is complete code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Fixed Table</title>
<STYLE TYPE="text/css">
table {
margin: 0 auto;
border-spacing: 15px;
width: 70%;
min-height: 250px;
table-layout: fixed;
}

td {
padding: 10px;
background-color: gray;
width: 50%;
word-wrap: break-word;
}       
</STYLE>
</head>
<body>
<table>
<tr>
<td>PeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeterPeter</td>
<td>GriffinGriffinGriffinGriffinGriffinGriffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
</body>
</html>

Hope this helps you.

Ashok

Set table to 70% but td to 50%?

3 Answers3