All geek questions in one place

Present tabular data using CSS where cells too wide don't break things

I have rows of data that I want to represent in fixed-size columns. For instance:

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

However, sometimes one of the column data is too large to fit. If this happens, I want it to affect as few neighboring cells as possible, and not the entire row if it is not needed.

Here is what I DO want:

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 :)

Here is what I DO NOT want :

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 :(

How do I do this with HTML / CSS (without javascript)?

Here's jsbin with a non-working solution where you can play and see for yourself.

UPDATE Here is a summary of the accepted answer when you have N columns:

N-1 DIV style = "display: inline-block", N-1. DIV N-2 div, N-2. ...

, , N.

+3
2
. ( - , , 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" ..

+1

div td < td><div class="mydiv">your content</div></td>

css .mydiv {overflow:auto;}, , , .

- , divs . ?

display:table; display:table-row; display:table-cell; .

http://jsbin.com/evoka3/3

0

Source: https://habr.com/ru/post/1774777/

More articles:


All Articles