2017-02-22 7 views
0

Я пытаюсь создать таблицу с несколькими строками и одним столбцом в html. Все строки будут содержать один столбец, кроме одного. Я знаю, что это можно сделать с colspan. Но я не хочу писать colspan для каждой строки только для одного. Есть простой способ сделать это?Должен ли я использовать colspan для каждой строки только для одной строки?

Пример:

<table> 
    <tr> 
     <td>Some text</td> 
    </tr> 
    <tr> 
     <td>Some text</td> 
    </tr> 
    <tr> 
     <td>Some text</td> 
    </tr> 
    <tr> 
     <td>Some text</td> 
     <td>Some text</td> 
    </tr> 
</table> 

Состав:

[   Some Text   ] 
[   Some Text   ] 
[   Some Text   ] 
[Some  Text][Some  Text] 
[   Some Text   ] 
[   Some Text   ] 
+0

Я думаю, что вы не можете сделать это без 'colspan' – Sankar

ответ

0

других мудрого использование не использует таблицу ДИВА

<div style="width:100px"> 
<label style="width:100px"></br> 
<label style="width:100px"></br> 
<label style="width:50px"> 
<label style="width:50px"></br> 
<label style="width:100px"></br> 
</div> 
0

Как насчет этого?

table tr:nth-of-type(4) { 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
} 
 

 
table { 
 
    position: relative; 
 
}
<table> 
 
    <tr> 
 
    <td>Some text</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Some text</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Some text</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Some text</td> 
 
    <td>Some text</td> 
 
    </tr> 
 
</table>

+0

Я пробовал с jsfiddle с помощью таблицы границы. Я думаю, что есть проблема. Я должен использовать colspan, я думаю – Furkan

0

Puting пустой "тд" внутри "тр" даст действительно закрыть из положить:

<table border="0"> 
    <tr> 
     <td></td> 
     <td>Some text</td> 
    </tr> 
    <tr> 
     <td></td> 
     <td>Some text</td> 
    </tr> 
    <tr> 
     <td></td> 
     <td>Some text</td> 
    </tr> 
    <tr> 
     <td>Some text</td> 
     <td></td>    
     <td>Some text</td> 
    </tr> 
    </table> 
0

Не знаю, о кросс-браузер совместимости, но здесь является решением.

td:only-child{ 
 
    display:block; 
 
    width:100% 
 
} 
 

 
td { 
 
    display:inline-block; 
 
    background:#eee; 
 
    text-align:center; 
 
    width:50%; 
 
    box-sizing: border-box; 
 
}
<table width="250"> 
 
    <tr> 
 
     <td>Some text</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some text</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some text</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some text</td> 
 
     <td>Some text</td> 
 
    </tr> 
 
</table>

Смежные вопросы