How to make a <td> as a new row using external css?

Question

How to make a <td> as a new row using external css?

1k Views Asked by Vuiee At 15 April 2025 at 09:08

I am new to stack overflow and I'm trying to make a mobile webpage from the existing desktop version webpage someone else created. Basically, I have to use same webpage for both mobile and desktop. For this specific page with table, I am trying to change the pattern of table for mobile using external style sheet.I had attached the html skeleton and css with this post. Initially, there is only one row with two s. I want to bring ".td2" to new in next line. I tried a basic table in which I was able to bring down all converted to tr worked but in this case, second containing a table is making me hard. I tried all the way I could. I will be helpful if someone help me.

tr{
    display:table;
    width:100%;
}
.lfttbl .td1, .td2{
    display:table-row;
    border-bottom: solid 1px #2b9ed5 !important;
}

<table class="out">
    <tr><td>
        <table class="outtbl">
        <tr>
        <td>
            <table class="lfttbl">
                <tr>
                    <td class= td1>
                       <p> hihi hii
                    </td>
                  <td class= td2>
                        <table class = rttbl"">
                          
                          </table>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

Original Q&A

There are 3 best solutions below

**Praveen Kumar Purushothaman** · Answer 1

There are a lot of bugs in your code:

<p> not closed!
Using tables for layout.
More worse: Using nested tables.

Going ahead with your layout, I was able to make these corrections to make it work in CSS.

tr{
    display:table;
    width:100%;
}
.lfttbl .td1, .td2{
    display:table-row;
    border-bottom: solid 1px #2b9ed5 !important;
}

.td1 {
  display: block;
  background: #f00;
}

<table class="out">
    <tr><td>
        <table class="outtbl">
        <tr>
        <td>
            <table class="lfttbl">
                <tr>
                    <td class= td1>
                       <p> hihi hii</p>
                    </td>
                  <td class= td2>
                        <table class = rttbl"">
                          
                          </table>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

**Nanang Mahdaen El-Agung** · Answer 2

You must close your <p>hihi hi and use display: block; on the td. Check this:

tr{
    display:table;
    width:100%;
}
.lfttbl .td1, .td2{
    display:block;
    border-bottom: solid 1px #2b9ed5 !important;
}

<table class="out">
    <tr><td>
        <table class="outtbl">
        <tr>
        <td>
            <table class="lfttbl">
                <tr>
                    <td class= td1>
                       <p> hihi hii</p>
                    </td>
                  <td class= td2>
                        <table class = rttbl"">
                          <p>Lorem ipsum</p>
                          </table>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

**Vuiee** · Answer 3

So, here is what I was struggling on. After several trials and errors, I came to know it works in desktop version now but not in mobile devices. I had attached my code and css on which I was working (Initially "edit" and "delete" were in different td). Now I don't know why its not working on mobo device. I know I can't use if else statement in css (either for desktop or for mobile).

#shipIMtd, #shipIMrighttd1, #shipIMrighttd2{display:block;}

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0;">
    <link href="mno.css" rel="stylesheet" type="text/css" />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<META Name="Robots" Content="noindex">
</head>
<table id="shipIMmaintbl" width="100%" cellpadding="0" cellspacing="0">
<tr><td align="center">
    <table id= "shipIMsubtbl" border="0" width="940">
  <tr>
<td valign="top" align="center" width="80%">
<div id="shipIMmidacdiv"  class="account-mid"><br />
<table width="95%" border="0" cellspacing="0" cellpadding="0" id="table12">
  <tr>
    <td>
      <table id="shipIMshipadtbl" width="735px" style="width:735px;border:solid 1px #D4D6D8;margin-bottom:15px;">
        <tr>
          <td id="shipIMsubtitle" valign="top" style="border-right: solid 1px #E7E4E4;padding:5px;"><span style="font:600 18px verdana;#2972B6"><strong> Addresses</strong></span></td>
    <td height="35" align="left" bgcolor="#F6F4F4" class="padd-top-lt">&nbsp;</td>
<div id="shipIMtitlediv" class="floatright newAddrBtn"><a href="uvx.asp"><input id="shipIMtitlebtn" type="button"  value="+ Add"></a></div>
</div>
</tr>
     
        <tr id="shipIMshipaddtr">
     <td id="shipIMtd" valign="top" style="border-right: solid 1px #E7E4E4;width:200px;padding:15px;">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.</p>  
     </td>
     <td id="shipIMrighttd1" align="left" class="padd-15 border-tbt1">
    <table id="shipIMeditship" cellpadding=3 cellspacing=0 border=0 width=80><tr><td>
    <form name="editship" action="abc.asp" method="post" />
     <input type="hidden" name="shipID" value="shpid">
     <input id="shipIMeditbtn" type="submit" value="Edit">
     
    </form>
                </td><td id="shipIMrighttd2">
    <form name="deleteship" action="xyz.asp" method="post">
     <input type="hidden" name="shipID" value="shpid" />
     <input type="hidden" name="asktype" value="firstask">
     <input id="shipIMdelbtn" type="submit" value="Delete">
    </form>
    </td></tr></table>
     </td>
   </tr>
      </table>
    </td>
  </tr>
</table>
    </div>
</td>
</tr>
</table>
</body>
</html>

.

How to make a <td> as a new row using external css?

There are 3 best solutions below

Related Questions in HTML

Related Questions in CSS

Related Questions in HTML-TABLE

Related Questions in EXTERNAL

Trending Questions

Popular # Hahtags

Popular Questions