The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> HTML Table (Single Line every row), Help! Need single line per row on the table
DStanko
post Jul 29 2019, 02:02 AM
Post #1





Group: Members
Posts: 1
Joined: 29-July 19
Member No.: 26,941



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jul 29 2019, 06:11 AM
Post #2


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



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.




User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jul 29 2019, 12:03 PM
Post #3


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



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?

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jul 29 2019, 05:28 PM
Post #4


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



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;
}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jul 29 2019, 06:32 PM
Post #5


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 10:27 AM