Почему TABLE не подчиняется моему правому стилю CSS? - PullRequest
0 голосов
/ 17 ноября 2011

У меня есть следующий код, и я ожидал, что TABLE уменьшится в окне браузера. Но это не так. Почему?

<body>
    <table style="position:fixed; left:50px; right:50px; bottom:50px; border:solid">
        <tr>
            <td style="border:solid">Left cell</td>
            <td style="border:solid">Right cell</td>
        </tr>
    </table>
</body>

UPDATE

Я даже собирался быть разочарованным языком CSS вообще, но очевидно, что люди, которые говорили, что нельзя применять оба стиля - ПРАВО и ВЛЕВО, были НЕПРАВИЛЬНЫМИ!

Так что это возможно, например, для DIV.

Также я обнаружил, что следующий код работает лучше:

<table>
    <tr style="position:fixed; left:50px; right:50px; bottom:50px; border:solid">
        <td style="border:solid; width:inherit">Left cell</td>
        <td style="border:solid; width:inherit">Right cell</td>
    </tr>
</table>

Ответы [ 3 ]

1 голос
/ 17 ноября 2011

Я думаю, что вы хотите поместить таблицу в контейнер с padding-left: 50px и padding-right:50px и дать таблице ширину 100%.Вам также следует рассмотреть возможность размещения вашего CSS в отдельном файле, так как встроенный CSS становится беспорядочным.

<html>
  <head>
    <style type="text/css">
      div.wrapper { padding: 0px 50px; }
      table.fullwidth { width: 100%; border: 1px solid #333; }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <table class="fullwidth">
        <tr>
          <td >Left cell</td>
          <td>Right cell</td>
        </tr>
      </table>
    </div>
  </body>
</html>
1 голос
/ 17 ноября 2011

Вы определенно можете применить к элементу свойства right и left.Проблема (я думаю) в том, что таблицы являются особым случаем - они будут растягиваться, чтобы соответствовать ширине содержимого в них, если ширина не указана явно.

Вам нужно сделать что-то вроде этого , используя позиционированную обертку div и установить width и height table для ее заполнения.

1 голос
/ 17 ноября 2011

Вы можете установить left или right, но не оба !!!!Попробуйте это:

<body style="padding: 50px;margin:0;">
    <table style="border-style:solid;width:100%">
        <tr>
            <td style="border-style:solid">Left cell</td>
            <td style="border-style:solid">Right cell</td>
        </tr>
    </table>
</body>

Пример: http://jsfiddle.net/R8aS8/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...