I converted some tabular data from word for a client:
<table>
<tr>
<th><p>SPAGHETTI – Deeg voorgerechten</p></th>
</tr>
<tr>
<td>SPAGHETTI AL PESCATORE</td>
<td>€11.50</td>
<td><p >Zeevruchten in speciale tomatensaus</p></td>
</tr>
<tr>
<td>SPAGHETTI ALLA MATRICIANA</td>
<td>€9.25</td>
<td><p >Met spek, knoflook in tomatensaus</p></td>
</tr>
<tr>
<td>SPAGHETTI BOSCAIOLA</td>
<td>€10.25
</td>
<td><p >Met ham, spek, knoflook in roomsaus</p></td>
</tr>
<table>
It's tabular data. It should be in a table :)
In the word doc, he put the last cell (the Dutch description) on a new line. I could regex every last cell to a new row with colspan="2", but that's not the structure. I tried:
td:last-child {
display: block;
}
But every browser ignores that. Any ideas?
EDIT: It sounds a little bit vague, doesn't it?
I have:
cell 1.1 cell 1.2 cell 1.3
cell 2.1 cell 2.2 cell 2.3
cell 3.1 cell 3.2 cell 3.3
I want:
cell 1.1 cell 1.2
cell 1.3
cell 2.1 cell 2.2
cell 2.3
cell 3.1 cell 3.2
cell 3.3
Tables don't work like that. <tr>
signifies a new row, a <td>
is on the same row. You'll never have (or at least should never have) <td>
's from the same <tr>
on different lines.
cell 1.1 cell 1.2
cell 2.1
cell 3.1 cell 3.2
cell 4.1
cell 5.1 cell 5.2
cell 6.3
Edit: It seems like you're hung up on using tables for some reason in a situation that is not suited for tables. May I suggest the following implementation (untested, you should get the basics of what I'm trying to do)?
.menu-item: {
display: block;
}
.price: {
float: right;
}
.description {
clear: both;
}
<h3>Spaghetti</h3>
<div class="menu-item">
<strong>Food name</strong>
<span class="price">10.00</span>
<span class="description">A great dish</span>
</div>
<div class="menu-item">
<strong>Food name</strong>
<span class="price">10.00</span>
<span class="description">A great dish</span>
</div>
<div class="menu-item">
<strong>Food name</strong>
<span class="price">10.00</span>
<span class="description">A great dish</span>
</div>