HTML Table (Single Line every row), Help! Need single line per row on the table |
HTML Table (Single Line every row), Help! Need single line per row on the table |
DStanko |
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) |
Christian J |
Jul 29 2019, 06:11 AM
Post
#2
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
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 Note that you may get horizontal scrolling if the table ends up too wide. |
pandy |
Jul 29 2019, 12:03 PM
Post
#3
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,731 Joined: 9-August 06 Member No.: 6 |
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? |
pandy |
Jul 29 2019, 06:32 PM
Post
#4
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,731 Joined: 9-August 06 Member No.: 6 |
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. |
Lo-Fi Version | Time is now: 26th April 2024 - 08:52 AM |