In an HTML table, the cellpadding and cellspacing can be set like this:
相关标签:
28条回答
2020-11-22 02:35
Wrap the contents of the cell with a div and you can do anything you want, but you have to wrap every cell in a column to get a uniform effect. For example, to just get wider left & right margins:
So the CSS will be,
div.cellwidener {
margin: 0px 15px 0px 15px;
}
td.tight {
padding: 0px;
}<table border="0">
<tr>
<td class="tight">
<div class="cellwidener">My content</div>
</td>
</tr>
</table>
Yes, it's a hassle. Yes, it works with Internet Explorer. In fact, I've only tested this with Internet Explorer, because that's all we're allowed to use at work.
2020-11-22 02:36
You can check the below code just create a index.html and run it.
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-spacing: 10px;
}
td {
padding: 10px;
}
</style>
</head>
<body>
<table cellspacing="0" cellpadding="0">
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
</body>
</html>
OUTPUT :
2020-11-22 02:36
I suggest this and all the cells for the particular table are effected.
table.tbl_classname td, th {
padding: 5px 5px 5px 4px ;
}
2020-11-22 02:37
This style is for full reset for tables - cellpadding , cellspacing and borders .
I had this style in my reset.css file:
table{
border:0; /* Replace border */
border-spacing: 0px; /* Replace cellspacing */
border-collapse: collapse; /* Patch for Internet Explorer 6 and Internet Explorer 7 */
}
table td{
padding: 0px; /* Replace cellpadding */
}
2020-11-22 02:37
You can easily set padding inside the table cells using the CSS padding property. It is a valid way to produce the same effect as the table's cellpadding attribute.
table,
th,
td {
border: 1px solid #666;
}
table th,
table td {
padding: 10px;
/* Apply cell padding */
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Set Cellpadding in CSS</title>
</head>
<body>
<table>
<thead>
<tr>
<th>Row</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Clark</td>
<td>Kent</td>
<td>clarkkent@mail.com</td>
</tr>
<tr>
<td>2</td>
<td>Peter</td>
<td>Parker</td>
<td>peterparker@mail.com</td>
</tr>
<tr>
<td>3</td>
<td>John</td>
<td>Rambo</td>
<td>johnrambo@mail.com</td>
</tr>
</tbody>
</table>
</body>
</html>
Similarly, you can use the CSS border-spacing property to apply the spacing between adjacent table cell borders like the cellspacing attribute. However, in order to work border-spacing the value of border-collapse property muse be separate, which is default.
table {
border-collapse: separate;
border-spacing: 10px;
/* Apply cell spacing */
}
table,
th,
td {
border: 1px solid #666;
}
table th,
table td {
padding: 5px;
/* Apply cell padding */
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Set Cellspacing in CSS</title>
</head>
<body>
<table>
<thead>
<tr>
<th>Row</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Clark</td>
<td>Kent</td>
<td>clarkkent@mail.com</td>
</tr>
<tr>
<td>2</td>
<td>Peter</td>
<td>Parker</td>
<td>peterparker@mail.com</td>
</tr>
<tr>
<td>3</td>
<td>John</td>
<td>Rambo</td>
<td>johnrambo@mail.com</td>
</tr>
</tbody>
</table>
</body>
</html>
2020-11-22 02:37
<table>
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
cell-padding can be given by padding in CSS while cell-spacing can be set by setting border-spacing for table.
table {
border-spacing: 10px;
}
td {
padding: 10px;
}
Fiddle.
加载中...
