Convert Horizontal <table> to vertical using CSS

Jassim Rahma

Hi, I have a <table> like this:

Name Mike Watson
Title Accountant
Department Finance

and I want to list it this way using CSS:

Name
Mike Watson

Title
Accountant

Department
Finance

How can I do that please?

Technology News @ www.JassimRahma.com

Salman _Memon

<h2>Horizontal Headings:</h2>

<table>
<tr>
<th>Name</th>
<th>Telephone</th>
<th>Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>

<h2>Vertical Headings:</h2>

<table>
<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th>Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<th>Telephone:</th>
<td>555 77 855</td>
</tr>
</table

>

Sam

Erick Shawn

Hi Jassim, More than making a table it is better to make it more attractive. http://www.w3schools.com/css/css\_table.asp\[[^](http://www.w3schools.com/css/css_table.asp "New Window")]

stef chui

Hi Jassim Rahma, You click the do it will send the result.

<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<script>
$(document).ready(function(){
$("a").click(function(){
$("table").each(function() {
var $this = $(this);
var newrows = [];
var i = 0;
$this.find("tr").each(function(){
$(this).find("td").each(function(){
i++;
if(newrows[i] === undefined) { newrows[i] = $(""); }
newrows[i].append($(this));
});
});
$this.find("tr").remove();
$.each(newrows, function(){
$this.append(this);
});
});

return false;

});
});
</script>

Name

Mike Watson

Title

Accountant

Department

Finance

Do it.

</body>
</html>