HTML/CSS/CSS Attributes and Javascript Style Properties/border collapse

Материал из Web эксперт
Перейти к: навигация, поиск

"border-collapse" Example

    
<html>
<body>
<table id="myTable" border="1" style="border-collapse:collapse">
<tr>
   <td>column 1</td>
   <td>column 2</td>
   <td>column 3</td>
</tr>
<tr>
   <td>cell 1</td>
   <td>cell 2</td>
   <td>cell 3</td>
</tr>
<tr>
   <td>cell 1</td>
   <td>cell 2</td>
   <td>cell 3</td>
</tr>
</table>
<button onclick="myTable.style.borderCollapse="separate"">separate</button>
<button onclick="myTable.style.borderCollapse="collapse"">collapse</button>
</body>
</html>



border-collapse: separate

 
<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
  <title>CSS Example</title>
  <style rel="stylesheet" type="text/css">
table {
  background-color: #efefef;
  width: 350px;
  border-collapse: separate;
  empty-cells: hide;
}
td {
  padding: 5px;
  border-style: solid;
  border-width: 1px;
  border-color: #999999;
}
</style>
</head>
<body>
<table>
  <tr>
    <th></th>
    <th>Title one</th>
    <th>Title two</th>
  </tr>
  <tr>
    <th>Row Title</th>
    <td>value</td>
    <td>value</td>
  </tr>
  <tr>
    <th>Row Title</th>
    <td>value</td>
    <td></td>
  </tr>
</table>
</body>
</html>
Источник — «http://wbex.ru/index.php?title=HTML/CSS/CSS_Attributes_and_Javascript_Style_Properties/border_collapse&oldid=4757»