Представление табличных данных с помощью CSS, где слишком широкие ячейки не разрушают вещи - PullRequest
Новая
       8

Представление табличных данных с помощью CSS, где слишком широкие ячейки не разрушают вещи

3 голосов
/ 14 ноября 2010

У меня есть строки данных, которые я хочу представить в столбцах фиксированного размера.Например: 

Name     City       Number
Adam     Anaheim    714 555 5555
Bob      Barstow    760 555 5555
...      ...        ...

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

Вот что я DO хочу: 

Name     City       Number
Adam     Anaheim    714 555 5555
Bob      Barstow    760 555 5555
Constantine  Canyon 805 555 5555  # Notice how phone number is still aligned :)

Вот что я НЕ хочу: 

Name     City       Number
Adam     Anaheim    714 555 5555
Bob      Barstow    760 555 5555
Constantine  Canyon     805 555 5555  # Notice how phone number is also shifted :(

Как мне сделать это с HTML / CSS (без JavaScript, пожалуйста)?

Вот jsbin с нерабочим решением, где вы можете поиграть и посмотреть сами.

ОБНОВЛЕНИЕ Вот краткий обзор принятых ответов, когда у вас есть Nстолбцы:

Первые N-1 столбцы должны быть заключены в DIV style = "display: inline-block", min-width которого представляет собой объединенную ширину первых N-1 столбцов.Затем внутри этого DIV первые столбцы N-2 должны быть обернуты в аналогичный элемент div, минимальная ширина которого равна общей ширине первых столбцов N-2.Продолжайте до конца ...

Это не красиво, но работает, и можно управлять для маленькой N.

Ответы [ 2 ]

1 голос
/ 14 ноября 2010

Хороший вопрос.Я не смог найти способ сделать это с обычной таблицей (частично из-за требуемых элементов оболочки, частично из-за того, что IE не будет работать должным образом), поэтому в приведенном ниже решении используются divs.* 

<!DOCTYPE html>
<title>Test Case</title>
<style type="text/css">
    body { font-size:11px; font-family: "Courier New"; }
    * { margin:0; padding:0; }

    .col, .span { display:inline-block; }
    .col1 { min-width:12ex; }
    .span2 { min-width:30ex; }
    .span3 { min-width:40ex; }

    /* IE6 */
    * html .col { display:inline; padding-right:1ex; }
    * html .span { display:inline; white-space:nowrap; }
    * html .col1 { width:12ex; }
    * html .span2 { width:30ex; }
    * html .span3 { width:40ex; }

    /* IE7 */
    *:first-child+html .col { display:inline; padding-right:1ex; }
    *:first-child+html .span { display:inline; }
</style>
<div class="table">
  <div class="row">
    <div class="span2 span">
      <div class="col1 col">Name</div>
      <div class="col">City</div>
    </div>
    <div class="col">Number</div>
  </div>
  <div class="row">
    <div class="span2 span">
      <div class="col1 col">Adam</div>
      <div class="col">Anaheim</div>
    </div>
    <div class="col">714 555 5555</div>
  </div>
  <div class="row">
    <div class="span2 span">
      <div class="col1 col">Bob</div>
      <div class="col">Barstow</div>
    </div>      
    <div class="col">760 555 5555</div>
  </div>
  <div class="row">
    <div class="span3 span">
      <div class="span2 span">
        <div class="col1 col">Constantine</div>
        <div class="col">Canyon</div>
      </div>         
      <div class="col">805 555 5555</div>
    </div>         
    <div class="col"># Notice how phone number is still aligned :)</div>
  </div>
</div>

Должно быть понятно, как расширить эту идею на дополнительные столбцы, используя оболочки "span4", "span5" и т. Д.

0 голосов
/ 14 ноября 2010

Я предлагаю вам использовать div внутри тд <<code>td><div class="mydiv">your content</div></td>

Затем вы даете в CSS .mydiv {overflow:auto;}, и это будет добавлять свитки, когда это необходимо, без разрушения вашего стола.

Редактировать - я только что видел, что вы используете div вместо таблицы. Почему это?

В любом случае вы можете использовать свойства display:table; display:table-row; и display:table-cell; для представления табличных данных.

Вот пример http://jsbin.com/evoka3/3

...