I'm a newbie regarding CSS and HTML, so apologies if this seems like a stupid question. But for the love of god, I can't seem to figure it out. I only get a horizontal scrollbar and not a vertical one.
In the code below I try to achieve that the last column, that contains the string 'aaaaaabbb...' becomes scrollable. So that when it's overfilled it starts a new line and shows a scrollbar. So I would like to see this for the last row:
Desired result:
aaaaaaaa
bbbbbbbc
cccccccc
HTML-code:
<!DOCTYPE html><html>
<head></head>
<body><head><style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
}
th {
text-align: left;
background-color: #eee;
}
.td_size {
width:100px;
height:200px;
max-width:100px;
min-width:100px;
max-height:200px;
min-height:2000px;
overflow:scroll;
}
</style></head><body>
<h2>Ticket details</h2>
<table>
<tr><th>Requester</th><td>^User^</td></tr>
<tr><th>Submitted by</th><td>®User®</td></tr>
<tr><th>Service</th><td>#GLOBAL END USER WORKPLACE#</td></tr>
<tr><th>CI</th><td>+N/A+</td></tr>
<tr><th>Source</th><td>#Event#</td></tr>
<tr><th>Category</th><td>&Request Fulfillment&</td></tr>
<tr><th>Impact</th><td>!None - No Degradation of Service!</td></tr>
<tr><th colspan="2" style="text-align:Center">Assignment</th></tr>
<tr><th>Group</th><td>]Team]</td></tr>
<tr><th>Staff</th><td>[User[</td></tr>
<tr><th colspan="2" style="text-align:Center">Description</th></tr>
<tr><td class="td_size">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaabbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbcccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccdddddddd</td</tr>
</table>
</body></html>
Thank you for your help.
Two things:
You have a missing ">" at the end of your closing </td>.
You only have one column in that <tr> - is that intentional? (if not you should have colspan=2 in that <td>
The solution you are looking for is word-wrap: break-word; This will allow the content to wrap.
I have modified your snippet:
<!DOCTYPE html><html>
<head></head>
<body><head><style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
}
th {
text-align: left;
background-color: #eee;
}
.td_size {
width:100px;
height:200px;
max-width:100px;
min-width:100px;
max-height:200px;
min-height:2000px;
overflow: auto; /* changed this */
word-wrap: break-word; /* added this */
}
</style></head><body>
<h2>Ticket details</h2>
<table>
<tr><th>Requester</th><td>^User^</td></tr>
<tr><th>Submitted by</th><td>®User®</td></tr>
<tr><th>Service</th><td>#GLOBAL END USER WORKPLACE#</td></tr>
<tr><th>CI</th><td>+N/A+</td></tr>
<tr><th>Source</th><td>#Event#</td></tr>
<tr><th>Category</th><td>&Request Fulfillment&</td></tr>
<tr><th>Impact</th><td>!None - No Degradation of Service!</td></tr>
<tr><th colspan="2" style="text-align:Center">Assignment</th></tr>
<tr><th>Group</th><td>]Team]</td></tr>
<tr><th>Staff</th><td>[User[</td></tr>
<tr><th colspan="2" style="text-align:Center">Description</th></tr>
<tr><td class="td_size" colspan=2>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaabbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbcccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccdddddddd</td></tr>
</table>
</body></html>
Like others have mentioned, in order to get the long-one-word text to wrap - you need to add: word-wrap: break-word; to the td
However, achieving a vertical scroll on a table cell is problematic because by definition table cells expand to fit all the content.
You could work around this by setting display:block on that table cell. (like this)
But it's probably better to wrap the text within a span tag so as not to mess with the display of table elements:
Like so:
FIDDLE
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
th,
td {
padding: 5px;
}
th {
text-align: left;
background-color: #eee;
}
.td_size {
width: 100px;
height: 200px;
max-width: 100px;
min-width: 100px;
}
.td_size span {
overflow: auto;
display: block;
max-height: 200px;
word-wrap: break-word;
}
<h2>Ticket details</h2>
<table>
<tr>
<th>Requester</th>
<td>^User^</td>
</tr>
<tr>
<th>Submitted by</th>
<td>®User®</td>
</tr>
<tr>
<th>Service</th>
<td>#GLOBAL END USER WORKPLACE#</td>
</tr>
<tr>
<th>CI</th>
<td>+N/A+</td>
</tr>
<tr>
<th>Source</th>
<td>#Event#</td>
</tr>
<tr>
<th>Category</th>
<td>&Request Fulfillment&</td>
</tr>
<tr>
<th>Impact</th>
<td>!None - No Degradation of Service!</td>
</tr>
<tr>
<th colspan="2" style="text-align:Center">Assignment</th>
</tr>
<tr>
<th>Group</th>
<td>]Team]</td>
</tr>
<tr>
<th>Staff</th>
<td>[User[</td>
</tr>
<tr>
<th colspan="2" style="text-align:Center">Description</th>
</tr>
<tr>
<td class="td_size"><span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaabbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbcccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccdddddddd</span>
</td>
</tr>
</table>
First, make that last column span over 2, ie colspan=2 but as for the css part you can use overflow-x and overflow-y to determine the scrolling parts
Try it
you may use word-wrap: break-word; or <br> tag where you want to break the word
Related
Current HTML:
<section class="Product-Info">
<table>
<tr>
<th colspan="2">Product Infromation</th>
</tr>
<tr>
<th>Product Name:</th>
<td>Name</td>
</tr>
<tr>
<th>Product Description:</th>
<td>Description</td>
</tr>
</table>
</section>
Desired:
Question:
How can I add borders and width to my current HTML with CSS as the desired outcome?
What I have tried
I have tried the following css:
table {
border: 1px solid black;
}
This just puts a border around the table. How can I add it same as desired too?
table {
border-collapse: collapse;
/* if you don't add this line you will see "double" borders */
border: 1px solid black;
width: 100vw;
}
th{
color: white;
background-color: blue;
}
td{
background-color: white;
width: 70%;
}
td, th {
border: 1px solid black;
}
<section class="Product-Info">
<table>
<tr>
<th colspan="2">Product Infromation</th>
</tr>
<tr>
<th>Product Name:</th>
<td>Name</td>
</tr>
<tr>
<th>Product Description:</th>
<td>Description</td>
</tr>
</table>
</section>
Heres, your snippet!
simply this:
table {
border-collapse: collapse; /* if you don't add this line you will see "double" borders */
border: 1px solid black;
}
table th,
table td {
text-align: left;
border: 1px solid black;
}
demo here https://jsfiddle.net/3hpks1mL/
hope it help you
section {
width:100wh;
}
table{
width:100%
}
<section class="Product-Info">
<table border="1">
<tr>
<th colspan="2">Product Infromation</th>
</tr>
<tr>
<td>Product Name:</td>
<td >Name</td>
</tr>
<tr>
<td > Product Description:</td>
<td >Description</td>
</tr>
</table>
</section>
Fairly easy, in your example you just have to apply the desired background colour to the table header cells (th), like so:
th {
background: darkblue;
color: white; /* Assuming you don't want black text on dark blue. */
}
For the standard border around the table cells to disappear you have to simply collapse the border on the main table element, like so:
table {
border-collapse: collapse;
}
With that set you can now apply any border styling you want to your table, in any thickness, colour and style you want.
I'd go with the following:
table, th, td {
border: 1px solid black;
}
.Product-Info > table {
width: 100%;
table-layout: fixed;
border-collapse: collapse;
text-align: center;
}
.Product-Info tr > *:first-child {
background: blue;
color: white;
text-align: left;
}
.w-25 {
width: 25% !important;
max-width: 25% !important;
}
.text-center {
text-align: center !important;
}
<section class="Product-Info">
<table>
<colgroup>
<col class="w-25 blue">
<col class="">
</colgroup>
<tr>
<th colspan="2" class="text-center">Product Infromation</th>
</tr>
<tr>
<th class="text-left">Product Name:</th>
<td class="text-center">Name</td>
</tr>
<tr>
<th class="text-left">Product Description:</th>
<td class="text-center">Description</td>
</tr>
</table>
</section>
Extra information (The "copy-paste" snippet under #Random-COSMOS answer).
Table is block-level element
"A block-level element always starts on a new line and takes up the
full width available. https://www.w3schools.com/html/html_blocks.asp"
Set any width you want to the table (400px or 30%) ==> 100% in your case (100% of its parent).
<table style="width: 100%;">
To specify table borders in CSS, use the border property.
table, th, td {
border: 1px solid black;
}
Out of topic - Accessible tables
For Web Accessibility => Add relationship between header and data cells (scope="row" / scope="col").
Full article: https://www.w3.org/WAI/tutorials/tables/two-headers/
<table>
<tr>
<th scope="col" colspan="2">Product Infromation</th>
</tr>
<tr>
<th scope="row">Product Name:</th>
<td>Some Name</td>
</tr>
<tr>
<th scope="row">Product Description:</th>
<td>Some Description</td>
</tr>
</table>
I have several tables. Some have 4 td in a row, some have 3 td in a row. Is there any smart way to make those td equal depend on the number of td in a row, since I don't want to write a specific css for each case.
For example, if a row have 4 td, each td's width should be 25% and 33.33% if a row have 3 td.
I'm using scss.
Edit: I'm also looking for a way that also meet this condition too: in a table, there is two rows, the first row has 2 td, the second row has 3 td and this table still meet my requirement.
For example, in this case, I want the td in the first row (which has 1 td) will have 100% width, not 25%
table {
table-layout: fixed;
width: 100%;
text-align: center;
border-collapse: collapse;
}
td, th {
border: 1px solid #dddddd;
padding: 8px;
}
<table>
<tr>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</table>
Thank you.
Use Below CSS
table {
table-layout: fixed;
width: 100%;
text-align: center;
border-collapse: collapse;
}
td, th {
border: 1px solid #dddddd;
padding: 8px;
}
Check Example here:- https://codepen.io/rvtech/pen/yLyewjG
You just need to use a fixed table layout and set the width of the table. I have included a few examples below.
.myTable, .subTable {
width: 200px;
table-layout: fixed;
}
td {
border: 1px solid black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<h1>1. table in a table(use a sub table that uses the same css)</h1>
<table class="myTable">
<tr>
<td>apple pie</td>
<td>orange tart</td>
<td>blueberry crumble</td>
</tr>
<tr>
<table class="subTable">
<tr>
<td>apple pie</td>
<td>orange chocolate</td>
</tr>
</table>
</tr>
<tr>
<table class="subTable">
<tr>
<td>meat pie</td>
<td>apple crumble</td>
<td>cranberry jam</td>
</tr>
</table>
</tr>
</table>
<hr>
<h1>2. use colspans that you will have to set via hand or javascript</h1>
<table class="myTable">
<tr>
<td>pumpkin pie</td>
<td>banana tart</td>
</tr>
<tr>
<td colspan="2">
blueberry pie
</td>
</tr>
</table>
<hr>
I'm trying to rearrange a relatively large table (using CSS media query) after the width of a screen reaches a certain point and have it look like this (see image below) when the browser window is squished all the way through:
I've already succeed at deleting the unwanted rows, and getting the basic layout of it.
The Problem is:
the inline block elements below each day of the week need to fit the width of the table, and nothing has worked so far, not flex (maybe I'm not using it correctly) or overflow, or border-box.
HTML (just a table)
<table>
<thead>
<tr>
<th>DAY</th>
<th style="width:300px;">CLASS</th>
<th>TIME</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>Monday</td>
<td>Endurance biking</td>
<td>9am-1pm</td>
<td>Register</td>
</tr>
<tr>
<td>Tuesday</td>
<td>Speed biking</td>
<td>2pm-4pm</td>
<td>Register</td>
</tr>
<tr class="toBeDeleted">
<td>Wednesday</td>
<td colspan="3" class="noClasses">No classes</td>
</tr>
<tr>
<td>Thursday</td>
<td>Speed biking</td>
<td>3pm-5pm</td>
<td>Register</td>
</tr>
<tr class="toBeDeleted">
<td>Friday</td>
<td colspan="3" class="noClasses">No classes</td>
</tr>
<tr>
<td>Saturday</td>
<td>Endurance biking</td>
<td>9am-1pm</td>
<td>Register</td>
</tr>
<tr>
<td>Sunday</td>
<td>Endurance biking</td>
<td>10am-4pm</td>
<td>Register</td>
</tr>
</tbody>
</table>
CSS (deletes 2 rows and the "thead", colors every first cell of each row and place that cell above the rest of it's respective row)
#media only screen and (max-width: 530px){
thead, .pasDeClasses{
display: none;
}
td:first-child{
background-color: #4080bc;
color: white;
font-family: Arial;
display: block;
}
tr > td{
border-left: 1px solid white;
max-width: 100%;
display: inline-block;
padding-top: 10px;
padding-bottom: 10px;
}
table{
min-width: 90%;
margin-left: auto;
margin-right: auto;
font-family: Arial;
}
}
thead{
background-color: #4080bc;
color: white;
}
td{
background-color: #d6d6d6;
padding-top: 10px; padding-bottom: 10px; padding-left: 30px; padding-right:
30px;
text-align: center;
}
You could try absolute-positioning only the last tr elements at the bottom of their parents. notice the position:relative, and display:block on the parent tr
tr{
display:block;position:relative;padding-bottom:20px
}
tr td:last-child{
position:absolute;bottom:0;
width:100%;height:20px
}
This works using the rule that an absolutely positioned element inside of a relatively positioned element will "dock" to the relatively positioned parent-element, rather than the viewport.
I have looked for many posts but I could not find an answer that suits this problem. I have tried with table-layout:fixed, changing widths to extreme values but the attribute width is still being ignored. Here is my code:
<table style="width:100%; table-layout:fixed; border: 1pt solid black;
border-collapse: collapse;" border cellpadding=3 cellspacing=0>
<tr>
<th align=center colspan="4"
style="width:100%; color:white; background-color:#475678; font-weight:bold;">
Oferta de traducción para: ' . $cliente . '
</th>
</tr>
<tr>
<td style="border-right:1pt solid black; width:10%;">Fecha</td>
<td align=center style="border-right:1pt solid black; width:10%;">Fecha</td>
<td style="border-right:1pt solid black; width:40%;"></td>
<td style="width:30%;">Fecha</td>
</tr>
</table>
Your issue was using table-layout: fixed;
Here is my retake on it.
Within the <style> you should put this into your css but assign an id or class to it if you're using tables elsewhere that are different:
table {
width: 100%;
border:1pt solid black;
border-collapse: collapse;
}
table td {
width:25%;
border-right: 1pt solid black;
text-align: center;
}
table th {
width: 100%;
color: white;
background: #475678;
font-weight:bold;
}
<table cellpadding="3" cellspacing="0">
<tr>
<th align=center colspan="4">Oferta de traducción para: ' . $cliente . '</td>
</tr>
<tr>
<td>Fecha</td>
<td>Fecha</td>
<td></td>
<td>Fecha</td>
</tr>
</table>
If you want to keep your CSS in the actual code, just remove the table-layout from <table> styling.
the table-layout: fixed is the one that ignores your widths.
from MDN HTML table-layout says like this about the table-layout: fixed,
Table and column widths are set by the widths of table and col
elements or by the width of the first row of cells. Cells in
subsequent rows do not affect column widths.
Try remove table-layout:fixed; and it will work.
How can I?
Given the html coding below, how can I 1.) Lock the first row (table headers) from scrolling and 2.) Have an inner table border of 1px solid #cccccc
Thanks for all your help!
Jay
Style Coding:
<style type="text/css">
div#data_container {
width: 800px;
height: 75px;
overflow: auto;
border: 1px solid #cccccc;
}
table#data_tbl {
border-collapse: collapse;
table-layout: fixed;
}
table#data_tbl td {
border: 0px;
}
table#data_tbl tr:first-child td {
color: #235A81;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#cdcdcd");
}
</style>
Body:
<!-- START OF DATA CONTAINER -->
<div id="data_container">
<table id="data_tbl">
<td>File Number</td>
<td>Date Received</td>
<td>Request Type</td>
<td>Name</td>
<tr>
<td>12345678</td>
<td>08/01/2013</td>
<td>Billing</td>
<td>Joe Smith</td>
</tr>
<tr>
<td>09876543</td>
<td>09/01/2013</td>
<td>Technical</td>
<td>Nancy Edwards</td>
</tr>
<tr>
<td>11223344</td>
<td>10/01/2013</td>
<td>Operations</td>
<td>Jill White</td>
</tr>
<tr>
<td>45678931</td>
<td>12/01/2013</td>
<td>Billing</td>
<td>Michael Burns</td>
</tr>
<tr>
<td>85239975</td>
<td>09/01/2013</td>
<td>Support</td>
<td>Debbie Stewart</td>
</tr>
<tr>
<td>55667788</td>
<td>11/01/2013</td>
<td>Administrative</td>
<td>David Adams</td>
</tr>
</table>
</div>
<!-- END OF DATA CONTAINER -->
Easiest way is to use 3rd party plugin. check this out: http://dlippman.imathas.com/projects/tablescroller.php or try datatables.net
Style table for borders:
table {
position: relative;
}
table, th, td {
border: 1px solid #cccccc;
}
You can set style="overflow:hidden" on th tag when box appears. It will lock mouse scroll or use position:fixed on a box.