Convert Td Columns into Tr Rows

Convert TD columns into TR rows

You want to turn HTML arranged like this:

<tr><td>A</td><td>B</td><td>C</td><td>D</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>

Into this:

<tr><td>A</td><td>1</td></tr>
<tr><td>B</td><td>2</td></tr>
<tr><td>C</td><td>3</td></tr>
<tr><td>D</td><td>4</td></tr>

Correct?

You can do this with Javascript, however, it is difficult to suggest a method with out knowing more about the structure of your site/HTML files. I'll give it a go.

Assuming your <table> tag comes with an id (like this: <table id="myTable"> you can access it in javascript like this:

var myTable = document.getElementById('myTable');

You can create a new table like this:

var newTable = document.createElement('table');

Now you need to transpose the old tables rows into the new tables columns:

var maxColumns = 0;
// Find the max number of columns
for(var r = 0; r < myTable.rows.length; r++) {
    if(myTable.rows[r].cells.length > maxColumns) {
        maxColumns = myTable.rows[r].cells.length;
    }
}

for(var c = 0; c < maxColumns; c++) {
    newTable.insertRow(c);
    for(var r = 0; r < myTable.rows.length; r++) {
        if(myTable.rows[r].length <= c) {
            newTable.rows[c].insertCell(r);
            newTable.rows[c].cells[r] = '-';
        }
        else {
            newTable.rows[c].insertCell(r);
            newTable.rows[c].cells[r] = myTable.rows[r].cells[c].innerHTML;
        }
    }
}

This ought to do what you need. Be forewarned: not tested. Working this javascript code into an HTML page is left as an exercise for the reader. If anyone spots any errors that I missed, I be gratified if you point them out to me or simply edit to fix :)

How to convert a single table row to two columns?

the first way does it in a table. You just need to use 3 rows and rearrange your cells. The second way is probably preferred and uses flexbox

<div id="mapControls" class="container">  <table>    <tr>      <td><input type="checkbox" id="births" checked="checked" onclick="toggleMarkerGroup('births')">Births</td>      <td><input type="checkbox" id="burials" checked="checked" onclick="toggleMarkerGroup('burials')">Burials</td>    </tr>    <tr>      <td><input type="checkbox" id="marriages" checked="checked" onclick="toggleMarkerGroup('marriages')">Marriages</td>      <td><input type="checkbox" id="migration" checked="checked" onclick="toggleMigration(migrations)"> Migrations</td>    </tr>    <tr>      <td><input type="checkbox" id="deaths" checked="checked" onclick="toggleMarkerGroup('deaths')">Deaths</td>
      <td> </td>    </tr>  </table></div>

How to convert a table from column into row when mapping a JSON object using React?

create rules for each row and loop on these rows, then on your data:

const data = [
  { Name: "Jame",   Email: 'jame123@gmail.com',   ID: "1568132456", City: "New York" },
  { Name: "Harris", Email: 'harris456@gmail.com', ID: "7666487798", City: "Chicago" },
  { Name: "Daisy",  Email: 'daisy789@gmail.com',  ID: "2177897432", City: "Los Angeles" },
  // etc...
];

const rows = [
  { name: 'Name', render: (item) => item.Name },
  { name: 'Email', render: (item) => item.Email },
  { name: 'ID', render: (item) => item.ID },
  { name: 'City', render: (item) => item.City },
];

const body = rows.map(({ name, render }) => (
  <tr key={name}>
    <td>{name}</td>
    {data.map((item, i) => (
      <td key={i}>{render(item)}</td>
    ))}
  </tr>
));

const content = (
  <div>
    <table>
      <tbody>{body}</tbody>
    </table>
  </div>
);

How to convert columns to rows using CSS

DEMO

Css Solution: Simply turn your td & th to display:block; & your tr to display:table-cell;

CSS:

@media screen and (max-width:767px) {
    table tr > *{
        display: block;
    }
    table tr {
        display: table-cell;
    }
}

Drawback: If your cells have too much data the layout will break Example.

jQuery Solution: We can keep track of element height to stay the same DEMO

JS:

$(function () {
    switchRowsAndCols("table", 767);
});

function switchRowsAndCols(thisTable, resolution) {
    if ($(window).width() < resolution) {
        switchRowsAndColsInnerFun(thisTable);
    }
    $(window).resize(function () {
        if ($(window).width() < resolution) {
            switchRowsAndColsInnerFun(thisTable);
        }else{
            switchRowsAndColsRemove(thisTable);
        }
    });
};

function switchRowsAndColsRemove(thisTable) {
    $("tr > *", thisTable).css({
        height: 'auto'
    });
};

function switchRowsAndColsInnerFun(thisTable) {
    var maxRow = $("tr:first-child() > *", thisTable).length;

    for (var i = maxRow; i >= 0; i--) {

        $("tr > *:nth-child(" + i + ")", thisTable).css({
            height: 'auto'
        });

        var maxHeight = 0;

        $("tr > *:nth-child(" + i + ")", thisTable).each(function () {
            var h = $(this).height();
            maxHeight = h > maxHeight ? h : maxHeight;
        });

        $("tr > *:nth-child(" + i + ")", thisTable).each(function () {
            $(this).height(maxHeight);
        });
    };
};

How to make TD behaving like TR(row) with CSS?

You can do this by applying display: block to the tds:

http://jsfiddle.net/wYA9K/

That works in all modern browsers except IE9..

Using float: left; width: 100% instead makes it also work in IE8/9:

http://jsfiddle.net/gvpzh/

Nothing will make it work in IE7.

Make a td span the entire row in a table

You should use the colspan attribute on the first row's td.

Colspan="3" will set the cell to flow over 3 columns.

<table width="900px" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td align="center" colspan="3">check</td>
    </tr>
    <tr>
        <td align="center">check</td>
        <td align="center">check</td>
        <td align="center">check</td>
    </tr>
</table>

HTML Break Table Columns (TD) To Multiple Rows On Small Screens

You can change to display: table-row with media queries Fiddle

@media(max-width: 480px) {  td {    display: table-row;  }}

<table><tr> <td>data...</td>  <td>data...</td>  <td>data...</td> </tr></table>

---

Related Topics