CSS table layout with missing cells

问题

I have HTML content from an external source to work with. It is tagged with divs and look somewhat like this:

<!DOCTYPE html>
<html>
  <head>
    <title>Example</title>
    <link rel="stylesheet" href="mycss.css" type="text/css"/>
  </head>
  <body>
    <div class="book">
      <div class="author">Author 1</div>
      <div class="title">Title 1</div>
      <div class="publisher">Publisher</div>
      <div class="year">2012</div>
    </div>
    <div class="book">
      <div class="author">Author 2</div>
      <div class="title">Title 2</div>
      <div class="year">2013</div>
    </div>
    <div class="book">
      <div class="author">Author 3</div>
      <div class="title">Title 3</div>
      <div class="publisher">Publisher</div>
    </div>
  </body>
</html>

Now, it would like to display it in a table layout with CSS, with alternating colors for each row. Somewhat like this:

body {
  display: table;
  width: 100%;
}

.book {
  display: table-row;
}

.book:nth-child(even) {
  background: #FFF;
}

.book:nth-child(odd) {
  background: #DDD;
}

.author, .title, .publisher, .year {
  display: table-cell;         
}

However, the problem with this solution is that, as you can see, some divs are missing in the HTML and yet I would like to accomplish the following:

Have each kind of information be aligned vertically. In other words, have the year of each publication in the above example to be displayed in a different column than publisher information.
Have the row coloring extend to cover the width of the page for every row.

Is this even possible using only CSS when I have several columns?

Fiddled - http://jsfiddle.net/sRJhs/

回答1:

Final answer, this works the best:

.book:nth-child(even) {
    background: #FFF;
}

.book:nth-child(odd) {
    background: #DDD;
}

.book {
    display: block;
    float: left;
    position: relative;
    width: 100%;
}

.book div {
    float: left;
    left: 100%;
    overflow: hidden;
    position: relative;
    width: 25%;
}
.author{
    margin-left: -100%;
}
.title{
    margin-left: -75%;
}
.publisher{
    margin-left: -50%;
}
.year {
    margin-left: -25%;
}

New fiddle - http://jsfiddle.net/sRJhs/17/

回答2:

Here is a working jsFiddle: http://jsfiddle.net/6Rwn2/

You need to set empty values for your cells that don't have a value. (ex. put a blank space  )

回答3:

Why don't you align the data on load?
see here http://jsfiddle.net/ryPPs/

$(document).ready(function() {
var emptyYearDiv = $('<div class="year">n/a</div>');
var emptyAuthorDiv = $('<div class="author">n/a</div>');
var emptyTitleDiv = $('<div class="title">n/a</div>');
 var emptyPublisherDiv = $('<div class="publisher">n/a</div>');
var emptyYearDiv = $('<div class="year">n/a</div>');

$(".book:not(:has(div[class^=year]))").append(emptyYearDiv);
$(".book:not(:has(div[class^=title]))").append(emptyTitleDiv);
$(".book:not(:has(div[class^=publisher]))").append(emptyPublisherDiv);
$(".book:not(:has(div[class^=year]))").append(emptyYearDiv);

});

来源：https://stackoverflow.com/questions/16893560/css-table-layout-with-missing-cells

标签

css

html

tablelayout