Hey I was wondering if you can have a HTML table and make certain columns have whitespace: nowrap and the other columns that have whitespace: normal?
Example:
<table>
<thead>
<tr>
<th>No wrap</th>
<th>Wrap</th>
</tr>
</thead>
<tbody>
<tr>
<td>Small text</td>
<td>Wrap this longgggg text</td>
</tr>
</tbody>
</table>
CSS white-space is normal by default, so all you need is to set it to nowrap for some of the columns. One way is to add a class to them, as:
<td class="my_nowrap">this won't wrap</td>
<style>
.my_nowrap {
white-space: nowrap;
}
</style>
Other way would be to use CSS3 nth-child selector and (without setting classes) target some of the columns, as:
<style>
td:nth-child(2),
td:nth-child(3) {
.my_nowrap {
white-space: nowrap;
}
</style>
The above would set 2nd and 3rd column to nowrap.
Yes this is possible. Take a look at the example below.
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
tr.wrap {
width: 50px;
}
th.wrap, td.wrap {
background: red;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
max-width: 10px;
}
<table style="width:100%">
<tr>
<th class='wrap'>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td class='wrap'>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
Related
I would like to highlight a row (change the background color) when i hover over any cell excluding the first 3 cells on the row (button cells). I also need to exclude the first row from the grid as that is the header row. (Images show desired behavior)
I have tried using many different :hover css selectors. But i cant seem to find the combination that allows me to highlight the row when hovering over any cell except the first 3.
table tr:hover td {
background-color: #e6e600;
}
<table>
<tr>
<th></th>
<th></th>
<th></th>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
</tr>
<tr>
<td><button></button></td>
<td><button></button></td>
<td><button></button></td>
<th>Joe</th>
<th>37</th>
<th>Male</th>
</tr>
</table>
Thanks!!
The 4th, 5thth, and 6th
columns were all <th>, the cells that are in the <tbody> should be <td>, so that is corrected. Also, I added a <thead> to it as well and an extra <tr> to show that the highlight affects each <tr> separately.
In order to meet the following criteria:
no JavaScript
valid HTML and CSS only
the 4th, 5thth, and 6th <td> of any <tr> within the <tbody> should all be highlighted at once if any one of them is hovered over.
the 1st, 2nd, and 3rd <td> of any <tr> within the <tbody> should never trigger any effects when hovering over them.
A sub-table could be used to isolate the last 3 columns:
in the <tbody>, remove the last 2 <td> of each <tr>.
add colspan="3" to the last <td> of each <tr> within the <tbody>
add a <table> into each of those <td colspan="3">
add a <tr> into that <table>
add 3 <td> into that <tr>
Figure I - a sub-table
<td class='col' colspan='3'>
<table class='sub'>
<tr><td>Joe</td><td>37</td><td>Male</td></tr>
</table>
</td>
table {
table-layout: fixed;
border-collapse: collapse;
}
th {
width: 5%;
}
th:nth-of-type(4) {
width: 50%;
}
th:nth-of-type(5) {
width: 5%;
}
th:nth-of-type(6) {
width: 15%;
}
td {
border: 1px solid #000;
background: transparent;
text-align:center;
}
.col {
padding: 0;
border: 0;
outline: 1px solid #000;
outline-offset: 0;
}
.sub tr:hover td {
background: #fc0;
}
.sub {
table-layout: fixed;
border-collapse: collapse;
min-width: 100%;
padding: 0;
border: 0.5px solid #000;
}
.sub td {
padding: 5px;
border: 1px solid 0.5px;
text-align: left;
}
.sub td:first-of-type {
width: 70%;
border-left: 0;
}
.sub td:nth-of-type(2) {
width: 10%;
text-align: center;
}
.sub td:last-of-type {
width: 20%;
}
<table>
<thead>
<tr>
<th></th>
<th></th>
<th></th>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
</tr>
</thead>
<tbody>
<tr>
<td><button>A</button></td>
<td><button>B</button></td>
<td><button>C</button></td>
<td class='col' colspan='3'>
<table class='sub'>
<tr><td>Joe</td><td>37</td><td>Male</td></tr>
</table>
</td>
</tr>
<tr>
<td><button>A</button></td>
<td><button>B</button></td>
<td><button>C</button></td>
<td class='col' colspan='3'>
<table class='sub'>
<tr><td>Jill</td><td>37</td><td>Female</td></tr>
</table>
</td>
</tr>
</tbody>
</table>
It is not fully possible without JS as CSS has no parent selector. A few browsers (Safari and Chrome Desktop) already included the :has()-selector but as said, it is not fully supported yet.
The closest thing you an do without scripting is to highlight all th in a row. That said, you can use the tr:hover selector to check for a hover on the entire row. This means the hover will also trigger if you hover the first 3 elements. The background-highlighting therefore will only be used on the th. To exclude the first row you can use the :not()-selector:
table tr:not(:nth-child(1)):hover th {
background-color: #e6e600;
}
<table>
<tr>
<th></th>
<th></th>
<th></th>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
</tr>
<tr>
<td><button></button></td>
<td><button></button></td>
<td><button></button></td>
<th>Joe</th>
<th>37</th>
<th>Male</th>
</tr>
</table>
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 a table where I specify width:100% but I don't want to expand one particular column(image column) to expand. It it possible?
Sample example:
body {}
img.consoleIcon,
img.ConsoleIconColumnHeader {
width: 17px !important;
height: 17px !important;
vertical-align: middle;
}
table td,
table th {
border: 1px solid #d0d0d0;
table-layout: fixed;
border-collapse: collapse !important;
}
<table>
<thead>
<th>Name</th>
<th>Age</th>
<th>Facebook</th>
<th>Twitter</th>
</thead>
<tbody>
<td>Shubh</td>
<td>33</td>
<td>
<a>
<img title="FB" class="consoleIcon" src="https://image.flaticon.com/icons/svg/124/124010.svg">
</a>
</td>
<td></td>
</tbody>
</table>
Now the above is simple example of a table without any width specified to it, now I go ahead & apply style width:100% but I don't want the image column(e.g Facebook) to expand.
body{
}
img.consoleIcon, img.ConsoleIconColumnHeader {
width: 17px !important;
height: 17px !important;
vertical-align: middle;
}
table td, table th{
border:1px solid #d0d0d0;
table-layout: fixed;
border-collapse: collapse !important;
}
<table style="width:100%">
<thead>
<th>Name</th>
<th>Age</th>
<th>Facebook</th>
<th>Twitter</th>
</thead>
<tbody>
<td>Shubh</td>
<td>33</td>
<td>
<a>
<img title="FB" class="consoleIcon" src="https://image.flaticon.com/icons/svg/124/124010.svg">
</a>
</td>
<td></td>
</tbody>
</table>
You can set the width on the td element.
Here I define an icon-cell class, on the td element, and I am setting a width in CSS :
img.consoleIcon, img.ConsoleIconColumnHeader {
width: 17px !important;
height: 17px !important;
vertical-align: middle;
}
table td, table th {
border: 1px solid #d0d0d0;
table-layout: fixed;
border-collapse: collapse !important;
}
.icon-cell {
width: 50px;
}
<table style="width:100%">
<thead>
<th>Name</th>
<th>Age</th>
<th>Facebook</th>
<th>Twitter</th>
</thead>
<tbody>
<td>Shubh</td>
<td>33</td>
<td class="icon-cell">
<a>
<img title="FB" class="consoleIcon" src="https://image.flaticon.com/icons/svg/124/124010.svg">
</a>
</td>
<td></td>
</tbody>
</table>
By applying the fixed width for table columns solved this problem.
Hope it is useful to you.
Here is my Code
<table style="width:100%">
<thead>
<th style="width:35%;">Name</th>
<th style="width:30%;">Age</th>
<th style="width:5%;">Facebook</th>
<th style="width:30%;">Twitter</th>
</thead>
<tbody>
<td>Shubh</td>
<td>33</td>
<td>
<a>
<img title="FB" class="consoleIcon" src="https://image.flaticon.com/icons/svg/124/124010.svg">
</a>
</td>
<td></td>
</tbody>
</table>
In CSS
body{
}
img.consoleIcon, img.ConsoleIconColumnHeader {
width: 17px !important;
height: 17px !important;
vertical-align: middle;
}
table td, table th{
border:1px solid #d0d0d0;
table-layout: fixed;
border-collapse: collapse !important;
}
Here is the Working Fiddle
[http://jsfiddle.net/1bn5ke9s/][1]
The first column of six columns table filled with various length of content. I want to make it responsive with only one row, cutted by overflow hidden and ellipsis, while maintain the table still responsive in mobile viewport with 100% width.
My code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
table {
max-width: 100%;
width: 100%;
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #ddd;
}
th, td {
text-align: left;
padding: 8px;
}
td {
width: 50%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 10px;
}
tr:nth-child(even){background-color: #f2f2f2}
</style>
</head>
<body>
<h2>Responsive Table</h2>
<div style="width: 100%;">
<table>
<tr>
<th>Content</th>
<th>Name</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
</tr>
<tr>
<td>around the table, and it will display a horizontal scroll bar when needed</td>
<td>Smith</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
</tr>
<tr>
<td>Eve Resize the browser window to see the effect. Try to remove the div element and see what happens to the table</td>
<td>Mike</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
</tr>
<tr>
<td>Adam that is too wide, you can add a container element with overflow-x:auto around the table</td>
<td>Johnson</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
</tr>
</table>
</div>
</body>
</html>
The code above makes the table become not responsive and failed to resize the first column as expected.
jsfiddle
Any help is highly appreciated.
The secret lies in display: block; ellipsis only applies to block-level elements. As such, you'll want to add the following rules to the relevant <td> elements:
display: block;
width: 100px; /* However wide you want the cell to be before ellipsis */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
This should only be applied to the first <td> element in each row, so you can use the selector td:first-of-type.
This can be seen in the following:
table {
max-width: 100%;
width: 100%;
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #ddd;
}
th,
td {
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #f2f2f2
}
td:first-of-type {
display: block;
width: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<h2>Responsive Table</h2>
<div style="width: 100%;">
<table>
<tr>
<th>Content</th>
<th>Name</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
</tr>
<tr>
<td class="ellipsis">around the table, and it will display a horizontal scroll bar when needed</td>
<td>Smith</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
</tr>
<tr>
<td>Eve Resize the browser window to see the effect. Try to remove the div element and see what happens to the table</td>
<td>Mike</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
</tr>
<tr>
<td>Adam that is too wide, you can add a container element with overflow-x:auto around the table</td>
<td>Johnson</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
</tr>
</table>
</div>
Note that you'll want to use pixel-based units rather than percentages, as with percentage the ellipsis will take effect, but the cell itself will still occupy 100% of the width.
Applying the style class below to your table cell individually should make the texts clip.
<style>
.clipText{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
}
.clipText:hover{
white-space: pre-wrap;
overflow: visible;
text-overflow: normal;
word-break: break-all;
}
</style>
and i would suggest if your trying to make a responsive table use css media query and display the table elements as blocks for small screens and arrange them as you see fit and a little js dom manipulation can also make it better using screen size as a condition.
<style type="text/css">
#media screen and (max-width: 520px){
table, th, tr, td{
display: block;
}
table tr:first-child{
display: none;
}
table tr:nth-child(even){
background-color: royalblue;
position: relative;
margin: 2% 0%;
}
table tr:nth-child(odd){
background-color: grey;
position: relative;
margin: 2% 0%;
}
table tr:nth-child(even) td{
color: white;
font-weight: bolder;
}
table tr:nth-child(odd) td{
color: black;
font-weight: bolder;
}
table td:nth-child(1)::before{
content: "Content: ";
}
table td:nth-child(2)::before{
content: "Name: ";
}
table td:nth-child(3)::before{
content: "Points: ";
}
table td:nth-child(4)::before{
content: "Points: ";
}
table td:nth-child(5)::before{
content: "Points: ";
}
table td:nth-child(6)::before{
content: "Points: ";
}
table td:nth-child(7)::before{
content: "Points: ";
}
}
</style>
to see the effects of the style above reduce/ minimize your browser size/width.
Finally I figured out how to solve this problem.
The secret is to make 2 different position within the TD that contain ellipsis text. This can be done by adding a new span element within the TD with position:absolute, while the TD itself use position:relative.
STEPS:
Style all TD with white-space:nowrap;
Style first TD with width:100% and position:relative
Style the span element within the TD with position:absolute; overflow: hidden; text-overflow: ellipsis; left: 0; right: 0;
Complete code on my working solution:
html, body {
margin: 0;
padding: 0;
font-family: sans-serif; */
}
table {
max-width: 100%;
width: 100%;
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #ddd;
display: table;
table-layout: auto;
}
th, td {
text-align: left;
padding: 8px;
}
td {
white-space: nowrap;
margin-bottom: 10px;
}
td:nth-child(1) {
width: 100%;
position: relative;
}
td:nth-child(1):not(:empty)::after {
/* Prevent row from collapsing vertically if the first column is empty */
content: '';
display: inline-block;
}
td:nth-child(1) > span {
position: absolute;
left: 0;
right: 0;
overflow: hidden;
text-overflow: ellipsis;
}
tr:nth-child(even){background-color: #f2f2f2}
<h2>Responsive Table</h2>
<div style="width: 100%;">
<table>
<tr>
<th>Content</th>
<th>Name</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
</tr>
<tr><td><span>overflow-x:auto around the table, and it will display a horizontal scroll bar when needed</span></td> <td><span>Smith</span></td> <td><span>50</span></td> <td><span>50</span></td> <td><span>50</span></td> <td><span>50</span></td> <td><span>50</td>
</tr>
<tr><td><span>Eve Resize the browser window to see the effect. Try to remove the div element and see what happens to the table</span></td> <td><span>Mike</span></td> <td><span><span>94</span></span></td> <td><span><span>94</span></span></td> <td><span><span>94</span></span></td> <td><span><span>94</span></span></td> <td><span><span>94</span></td>
</tr>
<tr><td><span>Adamthat is too wide, you can add a container element with overflow-x:auto around the table</span></td> <td><span>Johnson</span></td> <td><span>67</span></td> <td><span>67</span></td> <td><span>67</span></td> <td><span>67</span></td> <td><span>67</td>
</tr>
</table>
</div>
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