CODEWITHSUNDEEP
htmlcssasp.net
Koosh
Koosh

Reputation: 896

formatting a table using only two td's

I'm trying to build a web form however my goal is to make it in as little code as possible for maintenance reasons. What I'm dong is basically creating a questionaire and I've been using two td's to do that. this is what the text looks like...

1. Here is an example of what I mean when I do this.           DropDown
This is what I mean.

What I'm looking to have it look like is this...

1. Here is an example of what I mean when I do this.           DropDown
   This is what I would like for it to look like.

I know I am able to have a TD for the number (1.) , then another TD for the actual text, and 3rd TD for DropDown.

Here's what my code looks like.

 <table style="width:100%"
 <tr>
     <td>
         2.&nbsp;&nbsp;This is an example of the text that I use in my web application.
     </td>
     <td>
         <asp:DropDownList ID="drpID2" runat="server" Width="100px">
          </asp:DropDownList>
     </td>
  </tr>
 </table>

Is there any CSS/HTML trick I can use to resolve this, I have about 80 questions, and adding another TD is going to end up with a whole lotta more code.

Upvotes: 1

Views: 32

Answers (2)

G-Cyrillus
G-Cyrillus

Reputation: 105943

You may also use a CSS counter and a pseudo :

table {
  counter-reset: tr
}

tr:before {
  counter-increment: tr;
  content: counter(tr);
  display: table-cell;
  padding: 0 1em;
}
<table style="width:100%">
  <tr>
    <td>
      This is an example of the text that I use  <br/>
      in my web application.
    </td>
    <td>
      <asp:DropDownList ID="drpID2" runat="server" Width="100px">
      </asp:DropDownList>
    </td>
  </tr>
  <tr>
    <td>
      This is an example of the text <br/>
      that I use in my web application.
    </td>
    <td>
      <asp:DropDownList ID="drpID2" runat="server" Width="100px">
      </asp:DropDownList>
    </td>
  </tr>
  <tr>
    <td>
      This is an example of <br/>
       the text that <br/>
       I use in my web application.
    </td>
    <td>
      <asp:DropDownList ID="drpID2" runat="server" Width="100px">
      </asp:DropDownList>
    </td>
  </tr>
  <tr>
    <td>
      This is an example of the text <br/>
       that I use in my web application.
    </td>
    <td>
      <asp:DropDownList ID="drpID2" runat="server" Width="100px">
      </asp:DropDownList>
    </td>
  </tr>
  <tr>
    <td>
      This is an example of the text that I use in my web application.
    </td>
    <td>
      <asp:DropDownList ID="drpID2" runat="server" Width="100px">
      </asp:DropDownList>
    </td>
  </tr>
</table>

Upvotes: 1

Scath
Scath

Reputation: 3824

Is this what you're trying to do? Indent every line after the first to make it line up with the text after the number?

td {
    padding-left: 1.5em;
    text-indent:-1.3em;
}
 <table style="width:100%"
 <tr>
     <td>
         2.&nbsp;&nbsp;This is an example of the text that I use in my web application.
         <br/>
         This is what I would like for it to look like.
         <br/>
         This is what I would like for it to look like.
     </td>
     <td>
         <asp:DropDownList ID="drpID2" runat="server" Width="100px">
          </asp:DropDownList>
     </td>
  </tr>
 </table>

Upvotes: 1

Related Questions