Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ General Web Design _ HTML Table (Single Line every row)

Posted by: DStanko Jul 29 2019, 02:02 AM

So I need help with some HTML code, i have a table that for some reason whenever I type in the left column and it keeps going down lines instead of keeping it straight.
Refer to screenshot included.

Here is the code for one of the tables.

CODE
<tr>
<td id="" style="background-color: #333333; text-align: center;"> <span style="color: #f3f3f3;">One Position Print</span></td>
</tr>
</tbody>
</table>
<table></table>
<table style="width: 100%;">
<tbody>
<tr>
<td id="" style="background-color: #f2f1f1;">QTY:</td>
<td id="" style="background-color: #f2f1f1; text-align: center;"><span style="color: #22aeda;">50+</span></td>
<td id="" style="background-color: #f2f1f1; text-align: center;"><span style="color: #22aeda;">100+</span></td>
<td id="" style="background-color: #f2f1f1; text-align: center;"><span style="color: #22aeda;">250+</span></td>
<td id="" style="background-color: #f2f1f1; text-align: center;"><span style="color: #22aeda;">500+</span></td>
<td id="" style="background-color: #f2f1f1; text-align: center;"><span style="color: #22aeda;">1000+</span></td>
</tr>
<tr>
<td id="" style="background-color: #f2f1f1;">White Mugs With 1 Colour Print</td>
<td id="" style="background-color: #f2f1f1; text-align: center;">$1.20</td>
<td id="" style="background-color: #f2f1f1; text-align: center;"><span>$1.20</span></td>
<td id="" style="background-color: #f2f1f1; text-align: center;" span="">$1.20</td>
<td id="" style="background-color: #f2f1f1; text-align: center;" span="">$1.20</td>
<td id="" style="background-color: #f2f1f1; text-align: center;" span="">$1.20</td>
</tr>
<tr>
<td id="" style="background-color: #f2f1f1;">Coloured Mugs With 1 Colour Print</td>
<td id="" style="background-color: #f2f1f1; text-align: center;"><span>$1.20</span></td>
<td id="" style="background-color: #f2f1f1; text-align: center;"><span>$1.20</span></td>
<td id="" style="background-color: #f2f1f1; text-align: center;"><span>$1.20</span></td>
<td id="" style="background-color: #f2f1f1; text-align: center;">$1.20</td>
<td id="" style="background-color: #f2f1f1; text-align: center;">$1.20</td>
</tr>
<tr>
<td id="" style="background-color: #f2f1f1;">Additional Print Colour</td>
<td id="" style="background-color: #f2f1f1; text-align: center;"><span>$1.20</span></td>
<td id="" style="background-color: #f2f1f1; text-align: center;"><span>$1.20</span></td>
<td id="" style="background-color: #f2f1f1; text-align: center;"><span>$1.20</span></td>
<td id="" style="background-color: #f2f1f1; text-align: center;"><span>$1.20</span></td>
<td id="" style="background-color: #f2f1f1; text-align: center;"><span>$1.20</span></td>
</tr>
</tbody>
</table>


Be aware that where it says "One Position Print" with the black background that is a separate table, I did table width 100% with that one and the table under it with width 100% just so they line up.
What should I change to make it so the text in the column "QTY:" is all in one line and doesn't take up more lines.

Also, nowrap auto (scroll wheel) is not an option.


Attached thumbnail(s)
Attached Image

Posted by: Christian J Jul 29 2019, 06:11 AM

QUOTE(DStanko @ Jul 29 2019, 09:02 AM) *

Here is the code for one of the tables.

I strongly recommend using CSS class selectors instead of inline styles, that way you can reduce the code with maybe 90%. See http://htmlhelp.com/reference/css/quick-tutorial.html for the very basics, and example below.

QUOTE
<table></table>

The above is invalid and should be removed.

QUOTE
Be aware that where it says "One Position Print" with the black background that is a separate table, I did table width 100% with that one and the table under it with width 100% just so they line up.

It's best to use a single table. The black row's cells could be made with TH elements instead of TD, which makes it more semantical. CSS:

CODE
#articles {
width: 100%;
}

#articles th {color: #f3f3f3; background-color: #333333;}

#articles td {
color: #000;
background-color: #f2f1f1;
text-align: center;
}

#articles tr.top td {
color: #22aeda;
background-color: #f2f1f1;
}

#articles td.left {
text-align: left;
}

HTML:

CODE
<table id="articles">
<tr>
<th colspan="6">One Position Print</th>
</tr>

<tr class="top">
<td class="left">QTY:</td>
<td>50+</td>
<td>100+</td>
<td>250+</td>
<td>500+</td>
<td>1000+</td>
</tr>
<tr>
<td class="left">White Mugs With 1 Colour Print</td>
<td>$1.20</td>
<td>$1.20</td>
<td>$1.20</td>
<td>$1.20</td>
<td>$1.20</td>
</tr>
<tr>
<td class="left">Coloured Mugs With 1 Colour Print</td>
<td>$1.20</td>
<td>$1.20</td>
<td>$1.20</td>
<td>$1.20</td>
<td>$1.20</td>
</tr>
<tr>
<td class="left">Additional Print Colour</td>
<td>$1.20</td>
<td>$1.20</td>
<td>$1.20</td>
<td>$1.20</td>
<td>$1.20</td>
</tr>
</table>


QUOTE
What should I change to make it so the text in the column "QTY:" is all in one line and doesn't take up more lines.

That only happens in very narrow windows for me.
QUOTE
Also, nowrap auto (scroll wheel) is not an option.

Did you mean CSS "white-space: nowrap"? It has nothing to do with scroll wheels, but it is actually a good way to prevent unwanted line-breaks. You might also use non-breaking space HTML entities instead of blank spaces:

CODE
&nbsp;

Note that you may get horizontal scrolling if the table ends up too wide.





Posted by: pandy Jul 29 2019, 12:03 PM

QUOTE(Christian J @ Jul 29 2019, 01:11 PM) *

QUOTE
What should I change to make it so the text in the column "QTY:" is all in one line and doesn't take up more lines.

That only happens in very narrow windows for me.


There must be at least one outer table that we know nothing about. Maybe the concerned table's space is restricted.

DStanko, can you link to the page so we can see all of it?


Posted by: Christian J Jul 29 2019, 05:28 PM

QUOTE(Christian J @ Jul 29 2019, 01:11 PM) *

Did you mean CSS "white-space: nowrap"?

Forgot to post an example, so here is one (together with the rest of the code example above):

CODE
#articles td.left {
text-align: left;
white-space: nowrap;
}

Posted by: pandy Jul 29 2019, 06:32 PM

QUOTE(pandy @ Jul 29 2019, 07:03 PM) *

QUOTE(Christian J @ Jul 29 2019, 01:11 PM) *

QUOTE
What should I change to make it so the text in the column "QTY:" is all in one line and doesn't take up more lines.

That only happens in very narrow windows for me.


There must be at least one outer table that we know nothing about. Maybe the concerned table's space is restricted.

DStanko, can you link to the page so we can see all of it?


Looks like that's the case, judging from the screen cap.

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)