Question

I made this html file as instructed in a video course. However, for some reason, I’m not configuring the cell size properly despite playing around with CSS style sheet. Here is the code snippet for the table:

<table id="table1" cellspacing="40">
    <tr>
        <td><h3>Home</h3>"ksdjfkl;dajkfdl;sajfkldsjlsfl;saflklfas"<a href="about.html">more</a></td>
        <td><h3>About</h3>"dkfjakldfjdklsafjkldsjfvklzjvklz;cjv"<a href="about.html">more</a></td>
        <td><h3>Contact</h3>"jvkl;jkdlfjaklda;fjkdlsafjdlsfkd;"<a href="contact.html">more</a></td>
    </tr>
</table>

Here’s the code snippet that’s relevant to the table:

#table1{
width: 750px;
height: 250px;
table-layout: fixed;
margin-left: 20px;
}

#table1 td{
text-align: left;
background: #d8d8d8;
font-size: 14px;
padding: 15px;
border-radius: 10px;
-moz-border-radius: 10px;
box-shadow: 0px 0px 10px #000000;
-moz-box-shadow: 0px 0px 10px #000000;
}

#table1 h3{
text-align: center;
font-family: Pristina;
font-size: 20px;
}

This is the result of the page:

I have a feeling that I should be adding the settings in #table1 td{ ... }. However, I still have trouble with the appearance even after adding width = somepixels in #table1 td{ ... }. What would be your recommendations to fix it?

Thanks in advance!

Answer 1

Use CSS word-wrap property:

#table1 td {
     word-wrap: break-word;
}