Converting table to div with CSS only?


I have a table which is displaying a form in. I cannot modify the table tags because of the way a script is written.

Is there anyway, using CSS, that I can convert the table tags to divs or to act as divs?



You can set the display of the table elements to be something else (such as block) (ie8+) but you will still be limited to the actual structure of the html.


<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.table, .table tr, .table td, .table th { display:block }

<table class="table">
				<th scope="col">Table header</th>
				<th scope="col">Table header</th>
				<td>Row 1 Data 1</td>
				<td>Row 1 Data 2</td>
				<td>Row 2 data 1</td>
				<td>Row 2 data2</td>

Are you doing this because you want to change the layout to something different (in which case what Paul said is spot on) or are you doing it because you’ve heard that “tables are bad”. Because if it’s that then you’re wasting your time - tables (for non-tabular data) are bad because they misuse <table> tags. If you said you can’t change the HTML, you’re stuck with the <table> tags, and no amount of effort with the CSS will change that.