не правильная работа html таблицы

212

17 октября 2017, 01:48

Всем привет. Не могу решить проблему с таблицей. Сделал 2 таблицы, вот их код:

.a{ 
      background-color: black; 
} 
.s{ 
      background-color: white; 
}

    <table width=100% border=1 class="a"> 
    <tr > 
        <td rowspan=4 class="s">.</td> 
        <td rowspan=4 class="s">.</td> 
        <td colspan=3 rowspan=2 class="s">.</td> 
        <td colspan=3 class="s">.</td> 
      </tr> 
 
      <tr > 
        <td colspan=3 class="s">.</td> 
      </tr> 
 
      <tr > 
        <td rowspan=2 class="s">.</td> 
        <td rowspan=2 class="s">.</td> 
        <td rowspan=2 class="s">.</td> 
        <td colspan=2 class="s">.</td> 
        <td rowspan=2 class="s">.</td> 
      </tr> 
 
      <tr > 
        <td class="s">.</td> 
        <td class="s">.</td> 
      </tr> 
 
      <tr> 
        <td rowspan=5 class="s">.</td> 
        <td class="s">.</td> 
        <td class="s">.</td> 
        <td class="s">.</td> 
        <td class="s">.</td> 
        <td class="s">.</td> 
        <td class="s">.</td> 
        <td class="s" rowspan=5>.</td> 
      </tr> 
 
      <tr > 
        <td class="s" rowspan=2>.</td> 
        <td class="s">.</td> 
        <td class="s">.</td> 
        <td class="s">.</td> 
        <td class="s">.</td> 
        <td class="s">.</td> 
      </tr> 
 
      <tr > 
        <td class="s">.</td> 
        <td class="s">.</td> 
        <td class="s">.</td> 
        <td class="s">.</td> 
        <td class="s">.</td> 
      </tr> 
 
      <tr > 
        <td class="s">.</td> 
        <td class="s">.</td> 
        <td class="s">.</td> 
        <td class="s">.</td> 
        <td class="s">.</td> 
        <td class="s">.</td> 
      </tr> 
 
      <tr > 
        <td colspan=4 class="s">.</td> 
        <td class="s">.</td> 
        <td class="s">.</td> 
      </tr> 
    </tr> 
    </table > 
    </br> 
    <table width="100%" border="1" class="a" > 
    	<tr> 
    		<td class="s" rowspan="4">.</td> 
    		<td class="s" colspan="6">.</td> 
    	</tr> 
    	<tr> 
    		<td  class="s" colspan="3">.</td> 
    		<td class="s" colspan="3">.</td> 
    	</tr> 
    	<tr> 
    		<td class="s" colspan="2">.</td> 
    		<td class="s" rowspan="2">.</td> 
    		<td  class="s" colspan="2">.</td> 
    		<td class="s" rowspan="2">.</td> 
    	</tr> 
    	<tr> 
    		<td class="s">.</td> 
    		<td class="s">.</td> 
    		<td class="s">.</td> 
    		<td class="s">.</td> 
    		 
    	</tr> 
    	<tr> 
    		<td class="s">.</td> 
    		<td class="s">.</td> 
    		<td class="s">.</td> 
    		<td class="s">.</td> 
    		<td class="s">.</td> 
    		<td class="s">.</td> 
    		<td class="s">.</td> 
    	</tr> 
    </table>

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

Answer 1

Строка таблицы будет принимать наименьшую ширину\высоту, которая возможна. Но если ширина у вас указана - растягивать таблицу на 100%, то вот высота ячейки - нет, поэтому она и принимает без контента минимально возможную высоту. С контентом - принимает минимально возможную высоту + высота строк (line-height). Как вариант - укажите просто height:22px; и тогда минимальная высота будет 22 пикселя. Можете указать и padding, но тогда с контентом это будет сумма паддингов сверху и снизу + высота строки, а без контента просто сумма паддингов

.a{ 
  background-color: black; 
} 
.s{ 
  background-color: white; 
} 
td{ 
  height: 22px; 
}

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>no</title> 
    <link rel="stylesheet" href="zux.css"> 
</head> 
<body> 
 
<table width=100% border=1 class="a"> 
  <tr > 
    <td rowspan=4 class="s"></td> 
    <td rowspan=4 class="s"></td> 
    <td colspan=3 rowspan=2 class="s"></td> 
    <td colspan=3 class="s"></td> 
  </tr> 
 
  <tr > 
    <td colspan=3 class="s"></td> 
  </tr> 
 
  <tr > 
    <td rowspan=2 class="s"></td> 
    <td rowspan=2 class="s"></td> 
    <td rowspan=2 class="s"></td> 
    <td colspan=2 class="s"></td> 
    <td rowspan=2 class="s"></td> 
  </tr> 
 
  <tr > 
    <td class="s"></td> 
    <td class="s"></td> 
  </tr> 
 
  <tr> 
    <td rowspan=5 class="s"></td> 
    <td class="s"></td> 
    <td class="s"></td> 
    <td class="s"></td> 
    <td class="s"></td> 
    <td class="s"></td> 
    <td class="s"></td> 
    <td class="s" rowspan=5></td> 
  </tr> 
 
  <tr > 
    <td class="s" rowspan=2></td> 
    <td class="s"></td> 
    <td class="s"></td> 
    <td class="s"></td> 
    <td class="s"></td> 
    <td class="s"></td> 
  </tr> 
 
  <tr > 
    <td class="s"></td> 
    <td class="s"></td> 
    <td class="s"></td> 
    <td class="s"></td> 
    <td class="s"></td> 
  </tr> 
 
  <tr > 
    <td class="s"></td> 
    <td class="s"></td> 
    <td class="s"></td> 
    <td class="s"></td> 
    <td class="s"></td> 
    <td class="s"></td> 
  </tr> 
 
  <tr > 
    <td colspan=4 class="s"></td> 
    <td class="s"></td> 
    <td class="s"></td> 
  </tr> 
</table > 
 
<table width="100%" border="1" class="a" > 
    <tr> 
        <td class="s" rowspan="4"></td> 
        <td class="s" colspan="6"></td> 
    </tr> 
    <tr> 
        <td  class="s" colspan="3"></td> 
        <td class="s" colspan="3"></td> 
    </tr> 
    <tr> 
        <td class="s" colspan="2"></td> 
        <td class="s" rowspan="2"></td> 
        <td  class="s" colspan="2"></td> 
        <td class="s" rowspan="2"></td> 
    </tr> 
    <tr> 
        <td class="s"></td> 
        <td class="s"></td> 
        <td class="s"></td> 
        <td class="s"></td> 
 
    </tr> 
    <tr> 
        <td class="s"></td> 
        <td class="s"></td> 
        <td class="s"></td> 
        <td class="s"></td> 
        <td class="s"></td> 
        <td class="s"></td> 
        <td class="s"></td> 
    </tr> 
</table> 
</body>  
</html>