html5 совместимый cellpadding только в некоторых таблицах без редактирования элементов td

Возможно, я слишком разборчив. Я хочу, чтобы поместить ячейки в некоторые таблицы, но не в другие, без редактирования каждого элемента td. Я хотел бы сделать его html5 совместимым, что означает, что вы не используете свойство cellpadding таблицы. Но я хотел бы что-то эквивалентное cellpadding - то есть, что-то, что я могу применить к свойствам всей таблицы, в таблице по таблицам.html5 совместимый cellpadding только в некоторых таблицах без редактирования элементов td

Чтобы сделать его еще более сложным, я хочу свернуть границы, которые, как я думаю, исключают использование свойства ячейки. Я могу сделать что-то сложное?

источник

2016-09-20 freediver

<!DOCTYPE html> 
<html> 
<head> 
<style> 
table, th, td { 
    border: 1px solid black; 
} 
.cell-pad th,.cell-pad td{padding:10px} 
</style> 
</head> 

<body> 
<p>Table without cellpadding:</p> 
<table> 
    <tr> 
    <th>Month</th> 
    <th>Savings</th> 
    </tr> 
    <tr> 
    <td>January</td> 
    <td>$100</td> 
    </tr> 
</table> 

<p>Table with cellpadding:</p> 
<table cellpadding="10"> 
    <tr> 
    <th>Month</th> 
    <th>Savings</th> 
    </tr> 
    <tr> 
    <td>January</td> 
    <td>$100</td> 
    </tr> 
</table> 

<p>Table with css:</p> 
<table class="cell-pad"> 
    <tr> 
    <th>Month</th> 
    <th>Savings</th> 
    </tr> 
    <tr> 
    <td>January</td> 
    <td>$100</td> 
    </tr> 
</table> 

</body> 
</html>

источник

2016-09-20 12:05:31 Nikunj

Вы должны предоставить основное объяснение того, как это решает проблему OP, это было бы более полезно, чем просто простой код. –

Вы можете решить эти проблемы с помощью CSS.

table.table-big td { 
 
    padding: 10px; 
 
} 
 

 
table.table-collapse { 
 
border-collapse: collapse; 
 
} 
 

 
table td { 
 
    border: 1px solid #333; 
 
}

<table class="table-big table-collapse"> 
 
    <tr> 
 
    <td>foo</td> 
 
    <td>bar</td> 
 
    </tr> 
 
</table> 
 

 
<table> 
 
    <tr> 
 
    <td>Hello</td> 
 
    <td>World</td> 
 
    </tr> 
 
</table>

padding на клеточном уровне могут быть использованы для создания интервала между данными и границы.
border-collapse на столе можно использовать для развала или разделения границ.

Вы можете создавать классы с этими стилями, поэтому вы держите прямое управление над тем, какая таблица получает стиль. В моем примере вторая таблица не получила никакого стиля.

источник

2016-09-20 12:10:05

Спасибо Брайан и Nikunj и Maerten. Это именно то, что мне нужно. – freediver

Если это ответили на вопрос, отметьте его как принято –

. Я не могу понять, как это сделать. – freediver

html5 совместимый cellpadding только в некоторых таблицах без редактирования элементов td

ответ

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