Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
591 views
in Technique[技术] by (71.8m points)

html - Make a <td> span the entire row in a table

I'm not new to HTML but haven't touched it for some good time and I've encountered an annoying problem.

I have a table with two rows.
I want the first row to have one column - means that it will span the entire row, and I want the second row to have three columns, each one 33.3% of the row's width.

I have this code for the table :

<table width="900px" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td align="center">check</td>
    </tr>
    <tr>
        <td align="center">check</td>
        <td align="center">check</td>
        <td align="center">check</td>
    </tr>
</table>

But what happens is weird, the first row has one column with the same size as the second row's first column, and whenever I change one of them, it changes the other one too.

If I give the first row's <td> the width value of 500px lets say, it sets the second row's first <td> to the same size.

What am I doing wrong ?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

You should use the colspan attribute on the first row's td.
Colspan="3" will set the cell to flow over 3 columns.

<table width="900px" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td align="center" colspan="3">check</td>
    </tr>
    <tr>
        <td align="center">check</td>
        <td align="center">check</td>
        <td align="center">check</td>
    </tr>
</table>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...