любопытно, почему FF так позиционирует table-caption

olden69 · №1

CAPTION таблицы

Код:

CAPTION
{
  caption-side: top;
  text-align: center;
}

съезжает, если в CSS задать

Выделить код

Код:

TABLE
{
  margin-left: auto;
  margin-right: auto;
}

хотя сама таблица, заключенная в <DIV align="center">, позиционируется нормально
По идее caption должен расположиться по центру таблицы, но в итоге он центрируется относительно не понять чего

у кого есть объяснение?

Lynn · №2

А полный пример можно?

olden69 · №3

Lynn пишет

А полный пример можно?

Выделить код

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<META HTTP-EQUIV="Pragma" content="no-cache">
<META HTTP-EQUIV="Cache-Control" content="no-cache,must-revalidate,proxy-revalidate">
<META HTTP-EQUIV="Expires" content="Thu,06 Apr 2006 08:01:15">
<META HTTP-EQUIV="Last-Modified" content="Thu,06 Apr 2006 08:01:15">
<META HTTP-EQUIV="Content-Type" content="text/html; charset=windows-1251">
<title>test</title>
<style>
BODY
{
    padding: 5px;
    margin: 0;
}
TABLE
{
    margin-left: auto;
    margin-right: auto;
  /*margin: 0;*/
  border: 1pt solid #000000;
  border-collapse: collapse;
  border-spacing: 0px
  font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
  font-style: normal;
  font-size: 8pt;
  font-weight: normal;
  color: #000000;
  text-align: left;
}

CAPTION
{
  caption-side: top;
  width: auto;
  margin: 0;
  padding: 5px;
  font-weight: bold;
  font-size: 10pt;
  text-align: center;
}

TH
{
  margin: 0;
  border: #000000 1pt solid;
  padding-top: 1pt;
  padding-right: 2pt;
  padding-bottom: 1pt;
  padding-left: 2pt;
  font-weight: bold;
  text-align: center;
}

TD
{
  margin: 0;
  border: #000000 1pt solid;
  padding-top: 1pt;
  padding-right: 2pt;
  padding-bottom: 1pt;
  padding-left: 2pt;
  white-space: nowrap;
}

#header
{
  margin-left: 0px;
  color: #000;
  border-bottom: 1px solid #333;
  background-color:#d5d5d5;
  font-weight:bold;
  text-align: center;
}

#leftcol
{
  position: absolute;
  left: 0;
  width: 120px;
  height: 100%;
  margin-left: 10px;
  margin-top: 0px;
  color: #000;
  padding: 3px;
  border-right: #555555 1pt solid;
  font-size: 10pt;
}
#leftcol P
{
  margin-top: 5px;
  margin-bottom: 0px;
}

#content
{
  margin: 0px 0px 0 135px;
  padding: 3px;
}

A.menuLeft
{
    width: 120px;
    display:block;
    font-size: 11pt;
    text-decoration: none
}
A.menuLeft:link
{
    color: #000000;
}
A.menuLeft:visited
{
    color: #000000;
}
A.menuLeft:hover
{
    color: #000000;
    background-color:#d5d5d5;
}
</style>

</head>

<body>

<div id="leftcol">
<p><a href="g_money.php"   class="menuLeft">Money</a></p>
<p><a href="g_rates.php"   class="menuLeft">Rates</a></p>
</div>

<div id="content">

<div id="header">Lines</div>

<div align="center">
<br>
<table>
<caption>LINES</caption>
<thead>
<tr>
  <th>#</th>
  <th>code</th>
  <th>date</th>
  <th>active</th>
  <th>balance</th>
  <th>plan</th>
  <th>operation</th>
</tr>
</thead>
<tbody>
<form method="post">
<input type="hidden" name="id" value="1" />
<tr>
  <td align="right">1</td>
  <td align="center"><input type="text" name="line_code" value="001" size="10"  /></td>
  <td>2006-03-31 10:18</td>
  <td align="center"><input type="checkbox" name="is_active" checked="checked" /></td>
  <td align="right"><b>0.00</b></td>
  <td align="center">
    <select name="plan_id">
    <option value="0">default</option>
    <option value="1" selected="selected">MAIN</option>
    </select>
  </td>
  <td align="center"><input type="submit" name="cmd_line_save" value="save" /></td>
</tr>
</form>
</tbody>
</table>

</div>
</div>

</body>
</html>

Lynn · №4

Достаточно просто добавить фон для caption, что б понять, что он имеет ту же ширину, что и таблица, но просто не отцентрирован. Добавьте для caption margin-left/right: auto и всё будет как надо.

olden69 · №5

фокус не удался (с марджинами для CAPTION)
достаточно убрать их у TABLE и все нормализуется
непонятно только - ведь CAPTION - неотъемлемая часть TABLE и по идее не только ширину у таблицы должен брать, но и позиционироваться всегда относительно оной

Полезная информация

№105-04-2006 20:28:33