CODEWITHSUNDEEP
htmlcsshtml-table
Xpx
Xpx

Reputation: 147

Display a td element on next line in the same tr

I want to make a table which looks like this

------------------------------------------------------------------------------------  
| Column 1                   | Column 2           | Column 3        | Column 4     |    
| Long Text                                                                        |
------------------------------------------------------------------------------------  
| Column 1                   | Column 2           | Column 3        | Column 4     |    
| Long Text                                                                        |
------------------------------------------------------------------------------------

The td "Long Text" shares the same tr with Column 1,2,3 and 4. How can I force the td to move to "next line" in the same tr?

I tried to put a {display:block} attribute in the td of "Long Text" by following this way http://jsfiddle.net/hDsts/. However, it doesn't work.

Are there good solutions for this?

Upvotes: 2

Views: 5186

Answers (3)

Mladen Oršolić
Mladen Oršolić

Reputation: 1422

you can use colspan attribute like this

<table cellspacing=0 cellpadding=2>
    <tr>
        <td>Column 1</td>
        <td>Column 2</td>
        <td>Column 3</td>
        <td>Column 4</td>
    </tr>
    <tr>
        <td colspan=4>Long text</td>
    </tr>
    <tr>
        <td>Column 1</td>
        <td>Column 2</td>
        <td>Column 3</td>
        <td>Column 4</td>
    </tr>
    <tr>
        <td colspan=4>Long text</td>
    </tr>
</table>

and the css for the border

td {
    border: 1px dotted;
}

fiddle

Upvotes: 0

user4431269
user4431269

Reputation: 

<style>td, th{border: 1px solid;}</style>
<table>
  <tr>
    <th>Col1</th>
    <th>Col2</th>
    <th>Col3</th>
    <th>Col4</th>
  </tr>
  <tr>
    <td colspan="4">Verrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrry long text ?</td>
  </tr>
  <tr>
    <td>Col1</td>
    <td>Col2</td>
    <td>Col3</td>
    <td>Col4</td>
  </tr>
  <tr>
    <td colspan="4">Verrrrryyy LONG</td>
  </tr>
</table>

Like this ?

You have rowspan and colspan.

rowspan does this: 

+----------------------+------+------+------+
| Col1                 | Col2 | Col3 | Col4 |
+                      +------+------+------+
|                      | x    | x    | x    |
+                      +------+------+------+
|                      | Col2 | Col3 | Col4 |
+                      +------+------+------+
|                      |      | x    | x    |
+----------------------+------+------+------+

Upvotes: 2

PressingOnAlways
PressingOnAlways

Reputation: 12356

You can use the HTML tag rowspan.

http://www.htmlcodetutorial.com/tables/index_famsupp_30.html

Upvotes: 0

Related Questions