[RESOLVED] Force td to break before display

**awsdert** · 08-03-2012 04:27 PM

Hi, this is a personal project but I have a thing about being semantically correct about any project I make.

What I'm trying to achieve is to turn something like this:

Code:

<table>
  <tr>
    <th>Name</th>
    <td>Phone</td>
    <td>Address</td>
  </tr>
  <tr>
    <th>Name</th>
    <td>Phone</td>
    <td>E-mail</td>
  </tr>
  <tr>
    <th>Name</th>
    <td>E-mail</td>
  </tr>
</table>

into something like this:

Code:

* Name
  Phone
  Address
* Name
  Phone
  E-mail
* Name
  E-mail

but I'm getting something this:

Code:

* Name
  Phone      Address
* Name
  Phone      E-mail
* Name
  E-mail

with css like this:

Code:

html, html * { display: block }
tr { display: list-item }

I'll use classes later but for now I'd like to know if anyone can provide a solution.

**awsdert** · 08-03-2012 04:35 PM

Oh and before anyone says it, yes I know I could've used ul and li but this was a deliberate design choice. The reason: I want the flexibility to switch between tabular and listed format whenever I please whilst maintaining a code format a screen reader or something could convert to something a blind person can read - I use these personal projects as references when I write projects that the public can download.

**ssystems** · 08-04-2012 03:05 AM

Is the one you're trying to achieve?

Code:

<!DOCTYPE html>
<html>
<head>
	<style type="text/css" rel="stylesheet">
		html, html table tbody tr { display: list-item; }
		html, html table tbody tr td { display: table-row-group; }
	</style>
</head>
<body>
<table>
	<tbody>
  <tr>
    <th>Name</th>
    <td>Phone</td>
    <td>Address</td>
  </tr>
  <tr>
    <th>Name</th>
    <td>Phone</td>
    <td>E-mail</td>
  </tr>
  <tr>
    <th>Name</th>
    <td>E-mail</td>
  </tr>
  </tbody>
</table>
</body>
</html>

**awsdert** · 08-04-2012 10:21 AM

Thank you, that did the job nicely.

Thread: [RESOLVED] Force td to break before display

Thread Tools

Display

[RESOLVED] Force td to break before display

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions