Help - Search - Members - Calendar
Full Version: HTML Table (Single Line every row)
HTMLHelp Forums > Web Authoring > General Web Design
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.
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.




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?

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;
}
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.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2024 Invision Power Services, Inc.