I have an issue where code in IE shows color formatting correctly, but when using Firefox, it does not.
I've tried to use Firebug, I can see where the cells are and that the "style" gets loaded correctly, but it just doesn't display the background color in Firefox...
Relevant code looks like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Internal Radiant Support - Agent Stats</title>
<!-- Stylesheet -->
<style type="text/css">
table.default {
empty-cells:hide;
border-spacing: 2px;
background-color: rgb(0, 0, 0);
empty-cells:hide;
}
table.default th {
padding: 2px 2px 2px 2px;
background-color: #E4E4E4;
}
table.default td {
padding: 2px 2px 2px 2px;
background-color: #FFFFFF;
}
</style>
</head>
<body bgcolor="#FFFFFF" height="100%" text="#000000" leftmargin="0" rightmargin="0" topmargin="0" bottommargin="0" marginheight="0" marginwidth="0">
<form action="" method="post" name="crs_form" style="margin-top: 0; margin-right: 0; margin-left: 0; margin-bottom: 0;">
<table align="center" class="default">
<tr class="default">
<th><input type="submit" name="agent_stats_PC[calendar][navigate][previous]" value="<"></th>
<th colspan="6"><input type="submit" name="agent_stats_PC[calendar][navigate][month]" value="February"><input type="submit" name="agent_stats_PC[calendar][navigate][month]" value="2013"></th>
<th><input type="submit" name="agent_stats_PC[calendar][navigate][next]" value=">"></th>
</tr>
<tr class="default">
<th width="35">S</th>
<th width="35">M</th>
<th width="35">T</th>
<th width="35">W</th>
<th width="35">T</th>
<th width="35">F</th>
<th width="35">S</th>
<th width="35">W</th>
</tr>
<tr class="default">
<td style="align=center; background-color=#C4C4C4;">27</td>
<td>28</td>
<td>29</td>
<td>30</td>
<td>31</td>
<td>01</td>
<td style="align=center; background-color=#E4E4E4;">02</td>
</tr>
<tr class="default">
<td style="align=center; background-color=#E4E4E4;">03</td>
<td>04</td>
<td>05</td>
<td>06</td>
<td>07</td>
<td>08</td>
<td style="align=center; background-color=#E4E4E4;">09</td>
</tr>
<tr class="default">
<td style="align=center; background-color=#E4E4E4;">10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td style="align=center; background-color=#E4E4E4;">16</td>
</tr>
<tr class="default">
<td style="align=center; background-color=#E4E4E4;">17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td style="align=center; background-color=#E4E4E4;">23</td>
</tr>
<tr class="default">
<td style="align=center; background-color=#C4C4C4;">24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>01</td>
<td style="align=center; background-color=#E4E4E4;">02</td>
</tr>
</table>
<br /><table align="center" class="default">
<tr class="default">
<th>Agent Stats Converter</th>
</tr>
<tr class="default">
<td><textarea name="agent_stats_PC[import][data]" cols="32" rows="8"></textarea></td>
</tr>
<tr class="default">
<th><input type="submit" name="agent_stats_PC[import][button]" value="Submit"><input type="submit" name="agent_stats_PC[import][button]" value="Cancel"></th>
</tr>
</table>
</form>
</body>
</html>
You mix up css in tags and in the css area - but that is not the problem.
If you mean this part:
<td style="align=center; background-color=#C4C4C4;">27</td>
then it is
<td style="text-align:center; background-color:#C4C4C4;">27</td>
: is css, = is used like this:
<td background="..." ...
Related
How I can change this : (photo)
To this: (photo)
(!) Dosen't work with: text-align, text-justify, etc.
I believe that the best way to achieve that by creating a custom html table
table{
border: 1px solid #ddd;
}
.second{
width: 35%;
border-left:1px solid #ddd;
}
<table style="width: 100%;" border="0">
<tbody>
<tr>
<td>Item 1</td>
<td class="second">44$</td>
</tr>
<tr>
<td>Item 2</td>
<td class="second">$55</td>
</tr>
<tr>
<td >Item 3</td>
<td class="second">$66</td>
</tr>
<tr>
<td>Item 4</td>
<td class="second">$88</td>
</tr>
<tr>
<td>Item 5</td>
<td class="second">$99</td>
</tr>
</tbody>
</table>
<!-- DivTable.com -->
I have a table generated through a foreach (PHP) The problem is that I want to modify some specific cell on this table (in red) Knowing that I can not add a class, I must access it with a CSS style
EDIT :
I need add style to the first and last <td>, of the last <tr> with the .child class
Indeed, it is an ajax request that creates the <tr> with .child class So sometimes there are 2 <tr> and sometimes 10 <tr>
.tb-child .child th, .tb-child .child td, .details-close {
background: #f3f3f3;
text-align: center;
}
tbody > tr.child:last-child > td:first-child {
border-radius: 4px
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<div class="table-responsive table-padding tb-child">
<table id="data-tb" class="table table-striped table-bordered dataTable no-footer" role="grid" aria-describedby="data-tb_info">
<thead>
<tr>
<th></th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
</tr>
</thead>
<tbody>
<tr class="5007963">
<td id="5007963"></td>
<td>
<a rel="details">5007963</a>
</td>
<td>25</td>
<td data-sort="0" class="sorting_1">
<div>25</div>
</td>
<td data-sort="68">
<div>42</div>
</td>
<td data-sort="-16">
<div>21</div>
</td>
<td></td>
</tr>
<tr class="5012152">
<td class="details-control details-close first-plan"></td>
<td>
<a rel="details">5012152</a>
</td>
<td>3000</td>
<td data-sort="-22.23">
<div>2333</div>
</td>
<td data-sort="-22.2">
<div>2334</div>
</td>
<td data-sort="-29.63">
<div>2111</div>
</td>
<td></td>
</tr>
<tr class="child 5012152">
<th></th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th></th>
</tr>
<tr class="child 5012152">
<td></td>
<td>
<a rel="bin">
AZERTY1
</a>
</td>
<td>1000</td>
<td data-sort="66.7">
<div>1667</div>
</td>
<td data-sort="16.7">
<div>1167</div>
</td>
<td data-sort="44.4">
<div>1444</div>
</td>
<td></td>
</tr>
<tr class="child 5012152">
<td style="background: red"></td>
<td>
<a rel="bin">
AZERTY2
</a>
</td>
<td>1000</td>
<td data-sort="-33.3">
<div>667</div>
</td>
<td data-sort="-33.3">
<div>667</div>
</td>
<td data-sort="-66.7">
<div>333</div>
</td>
<td style="background: red"></td>
</tr>
<tr class="5012277">
<td id="5012277"></td>
<td>
<a rel="details">5012277</a>
</td>
<td>10</td>
<td data-sort="-30" class="sorting_1">
<div>7</div>
</td>
<td data-sort="-30">
<div>7</div>
</td>
<td data-sort="-30">
<div>7</div>
</td>
<td></td>
</tr>
</tbody>
</table>
</div>
jsiddle
I tried several things like:
tbody > tr.child:last-child > td:first-child {
border-radius: 4px
}
But nothing works .. How to do?
This will work for you.
I have used nth-last-child(2) to target the td's in red.
My added Code:
tbody > tr:nth-last-child(2)>td:first-child,tbody > tr:nth-last-child(2)>td:last-child {
border-radius: 4px;
}
.tb-child .child th, .tb-child .child td, .details-close {
background: #f3f3f3;
text-align: center;
}
tbody > tr:nth-last-child(2)>td:first-child,tbody > tr:nth-last-child(2)>td:last-child {
border-radius: 4px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<div class="table-responsive table-padding tb-child">
<table id="data-tb" class="table table-striped table-bordered dataTable no-footer" role="grid" aria-describedby="data-tb_info">
<thead>
<tr>
<th></th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
</tr>
</thead>
<tbody>
<tr class="5007963">
<td id="5007963"></td>
<td>
<a rel="details">5007963</a>
</td>
<td>25</td>
<td data-sort="0" class="sorting_1">
<div>25</div>
</td>
<td data-sort="68">
<div>42</div>
</td>
<td data-sort="-16">
<div>21</div>
</td>
<td></td>
</tr>
<tr class="5012152">
<td class="details-control details-close first-plan"></td>
<td>
<a rel="details">5012152</a>
</td>
<td>3000</td>
<td data-sort="-22.23">
<div>2333</div>
</td>
<td data-sort="-22.2">
<div>2334</div>
</td>
<td data-sort="-29.63">
<div>2111</div>
</td>
<td></td>
</tr>
<tr class="child 5012152">
<th></th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th></th>
</tr>
<tr class="child 5012152">
<td></td>
<td>
<a rel="bin">
AZERTY1
</a>
</td>
<td>1000</td>
<td data-sort="66.7">
<div>1667</div>
</td>
<td data-sort="16.7">
<div>1167</div>
</td>
<td data-sort="44.4">
<div>1444</div>
</td>
<td></td>
</tr>
<tr class="child 5012152">
<td style="background: red"></td>
<td>
<a rel="bin">
AZERTY2
</a>
</td>
<td>1000</td>
<td data-sort="-33.3">
<div>667</div>
</td>
<td data-sort="-33.3">
<div>667</div>
</td>
<td data-sort="-66.7">
<div>333</div>
</td>
<td style="background: red"></td>
</tr>
<tr class="5012277">
<td id="5012277"></td>
<td>
<a rel="details">5012277</a>
</td>
<td>10</td>
<td data-sort="-30" class="sorting_1">
<div>7</div>
</td>
<td data-sort="-30">
<div>7</div>
</td>
<td data-sort="-30">
<div>7</div>
</td>
<td></td>
</tr>
</tbody>
</table>
</div>
But some of the styles are there which comes from bootstarap css so if you want to over-right them also you will have to use !important in your style.
sample -
tbody > tr:nth-last-child(2)>td:first-child,tbody > tr:nth-last-child(2)>td:last-child {
border-radius: 4px !important;
}
Hope this was helpfull for you.
I am creating HTML Emailer.
I want to have the td elements to be center in the next tr. if there is 1 td element then it should be center of tr , if there is 2 td elements then also it should be in the center of tr and if there is 3 td elements then it should be in the center of tr.
How can I do so?
I can't use any external CSS or library as I am making HTML Emailer.
I have used the below code.
<table cellspacing="0" cellpadding="0" border="0" style="background:white; text-align:center; margin: 0 auto !important; padding: 0px; width:600px !important; line-height: 100% !important; border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;font-family:Arial" >
<tbody>
<tr>
<td >
<table style="width:450px;margin:0 auto;">
<tbody>
<tr>
<td align="center">
<table style="margin:0 15px;">
<tbody>
<tr>
<td valign="middle">
<img src="http://i.imgur.com/LVHwl97.png" style="padding-right:5px;" alt="" width="18" height="18">
</td>
<td style="border-left:thin black solid; padding:0 0 0 10px;text-align:left;">
<span style="margin:0;font-size:11px;">element 1
</span>
</td>
</tr>
</tbody>
</table>
</td>
<td align="center">
<table style="margin:0 15px;">
<tbody>
<tr>
<td valign="middle">
<img src="http://i.imgur.com/LVHwl97.png" style="padding-right:5px;" alt="" width="18" height="18">
</td>
<td style="border-left:thin black solid; padding:0 0 0 10px;text-align:left;">
<span style="margin:0;font-size:11px;">element 1
</span>
</td>
</tr>
</tbody>
</table>
</td><td align="center">
<table style="margin:0 15px;">
<tbody>
<tr>
<td valign="middle">
<img src="http://i.imgur.com/LVHwl97.png" style="padding-right:5px;" alt="" width="18" height="18">
</td>
<td style="border-left:thin black solid; padding:0 0 0 10px;text-align:left;">
<span style="margin:0;font-size:11px;">element 1
</span>
</td>
</tr>
</tbody>
</table>
</td><td align="center">
<table style="margin:0 15px;">
<tbody>
<tr>
<td valign="middle">
<img src="http://i.imgur.com/LVHwl97.png" style="padding-right:5px;" alt="" width="18" height="18">
</td>
<td style="border-left:thin black solid; padding:0 0 0 10px;text-align:left;">
<span style="margin:0;font-size:11px;">element 1
</span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center">
<table style="margin:0 15px;">
<tbody>
<tr>
<td valign="middle">
<img src="http://i.imgur.com/LVHwl97.png" style="padding-right:5px;" alt="" width="18" height="18">
</td>
<td style="border-left:thin black solid; padding:0 0 0 10px;text-align:left;">
<span style="margin:0;font-size:11px;">element 1
</span>
</td>
</tr>
</tbody>
</table>
</td><td align="center">
<table style="margin:0 15px;">
<tbody>
<tr>
<td valign="middle">
<img src="http://i.imgur.com/LVHwl97.png" style="padding-right:5px;" alt="" width="18" height="18">
</td>
<td style="border-left:thin black solid; padding:0 0 0 10px;text-align:left;">
<span style="margin:0;font-size:11px;">element 1
</span>
</td>
</tr>
</tbody>
</table>
</td><td align="center">
<table style="margin:0 15px;">
<tbody>
<tr>
<td valign="middle">
<img src="http://i.imgur.com/LVHwl97.png" style="padding-right:5px;" alt="" width="18" height="18">
</td>
<td style="border-left:thin black solid; padding:0 0 0 10px;text-align:left;">
<span style="margin:0;font-size:11px;">element 1
</span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Any help would be great.
I'm not sure I get what you want. But I think you are looking for colspan.
<table>
<tr>
<td>Element 1</td>
<td>Element 2</td>
<td>Element 3</td>
</tr>
<tr>
<td colspan="3" style="text-align: center">Centered</td>
</tr>
</table>
Working with colspan and rowspan should also make those nested tables a little more manageable.
Your question is not clear to me ,and also you need to be cautious when nesting tables.
you can use 'colspan'
Your question is not really clear about what you want to do but if you want a pure HTML one then,
<!DOCTYPE html>
<html>
<head>
<style>
table,
th,
td {
border: 1px solid black;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td align="right">Right</td>
</tr>
<tr>
<td>February</td>
<td align="center">Centered</td>
</tr>
<tr>
<td>February</td>
<td align="left">left</td>
</tr>
</table>
</body>
</html>
Another example with colspan,
<html>
<head>
<style>
table,
th,
td {
border: 1px solid black;
}
</style>
</head>
<body>
<table style="width:100%">
<tr style="text-align:center">
<td>Month</td>
<td>Savings</td>
<td>Gone</td>
</tr>
<tr>
<td colspan="3">
<table style="width:100%">
<tr style="text-align:center;">
<td>
test
</td>
<td>
test2
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
You need to make use of colspan and text-align: center. Just remember that if a column has less than the maximum number of TDs in it, then colspan must be set to that. So below the columns with one and two TDs are set to 3 to line up with the one with three. I put the two TDs in an individual table which is also another techniques you can use to have different TDs in a TR. Note that the TD the table is in also has its colspan declared as 3 they must also be equal.
Think of it in an excel sheet, you have column a, b, c and so on. If you want a column to be the centre of three then it has to cross a, b and c.
<table cellspacing="1" cellpadding="0" border="1" style=" width:100%; text-align:center;">
<tr>
<td colspan="3">ipsum</td>
</tr>
<tr>
<td colspan="3">
<table cellspacing="1" cellpadding="0" border="1" style=" width:100%; text-align:center;">
<tr>
<td>ipsum</td>
<td>ipsum</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>ipsum</td>
<td>ipsum</td>
<td>ipsum</td>
</tr>
</table>
I think what you need is the hybrid approach. It requires more code than what you might be used to.
To see the code in action:
Run the code snippet, do full screen and resize your browser.
Hybrid method of coding:
Hybrid coding uses outlook conditional statements to create the columns specifically for outlook while all other email clients read the div tags to create the columns.
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="left" valign="top" width="600">
<![endif]-->
<table class="container hundred" width="100%" border="0" align="center" cellpadding="0" cellspacing="0" style="width:100%; max-width: 600px;">
<tr>
<!-- 5 column starts -->
<td style="text-align: center; vertical-align: top; font-size: 0px; padding: 0px;">
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="left" valign="top" width="120">
<![endif]-->
<div style="width:20%;min-width:120px; display: inline-block; vertical-align: top;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="font-size:12px; font-family:Arial; color:#000000;">Column 1 of 5</td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td align="left" valign="top" width="120">
<![endif]-->
<div style="width:20%;min-width:120px; display: inline-block; vertical-align: top;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="font-size:12px; font-family:Arial; color:#000000;">Column 2 of 5</td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td align="left" valign="top" width="120">
<![endif]-->
<div style="width:20%;min-width:120px; display: inline-block; vertical-align: top;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="font-size:12px; font-family:Arial; color:#000000;">Column 3 of 5</td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td align="left" valign="top" width="120">
<![endif]-->
<div style="width:20%;min-width:120px; display: inline-block; vertical-align: top;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="font-size:12px; font-family:Arial; color:#000000;">Column 4 of 5</td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td align="left" valign="top" width="120">
<![endif]-->
<div style="width:20%;min-width:120px; display: inline-block; vertical-align: top;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="font-size:12px; font-family:Arial; color:#000000;">Column 5 of 5</td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
<!-- 5 column ends -->
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
Hope this is the answer you were looking for.
Cheers
I have the following table. I use colspan="4" for 2 td - but they are not equal. First column is greater than second. What is this due to?
<table border="0" cellpadding="0" cellspacing="0">
<tr><td colspan="8" style="height:10px;"> </td></tr>
<tr><td colspan="8" style="height:10px;"> </td></tr>
<tr>
<td style="position: relative; font-size: 14px;" colspan="8">
text
</td>
</tr>
<tr><td colspan="8"> </td></tr>
<tr>
<td colspan="4">
To:
</td>
<td colspan="4">
From:
</td>
</tr>
<tr>
<td colspan="4">
text<br>
text<br>
text<br>
text
</td>
<td colspan="4">
text<br>
text<br>
text<br>
text
</td>
</tr>
//in the same way other rows
</table>
It looks in this way:
Not quite sure what you meant, but I've given it a shot. I added a colgroup to depict the difference more clearly, and replaced the HTML5 deprecated border="0" cellpadding="0" cellspacing="0" attributes.
table {
border: 0;
border-spacing: 0;
border-collapse: collapse;
table-layout: fixed;
width: 100px; /*Needs to be greater than the size of 'From:'*/
}
td {
padding: 0;
}
<table>
<colgroup>
<col span="4" style="background-color:red">
<col span="4" style="background-color:yellow">
</colgroup>
<tr>
<td colspan="8" style="height:10px;"> </td>
</tr>
<tr>
<td colspan="8" style="height:10px;"> </td>
</tr>
<tr>
<td style="position: relative; font-size: 14px;" colspan="8">
text
</td>
</tr>
<tr>
<td colspan="8"> </td>
</tr>
<tr>
<td colspan="4">
To:
</td>
<td colspan="4">
From:
</td>
</tr>
<tr>
<td colspan="4">
text
<br>text
<br>text
<br>text
</td>
<td colspan="4">
text
<br>text
<br>text
<br>text
</td>
</tr>
</table>
Although looking at your image, the following structure would be more appropriate:
table {
border: 0;
border-spacing: 0;
border-collapse: collapse;
table-layout: fixed;
width: 100%;
/*Needs to be greater than the size of 'From:'*/
}
td {
padding: 0;
}
caption {
color: #002B7F;
font-weight: bold;
}
caption,
th {
text-align: left;
}
thead {
background-color: #007C66;
color: white;
}
<table>
<caption>text</caption>
<thead>
<th>To:</th>
<th>From:</th>
</thead>
<tr>
<td>text</td>
<td>text</td>
</tr>
<tr>
<td>text</td>
<td>text</td>
</tr>
<tr>
<td>text</td>
<td>text</td>
</tr>
<tr>
<td>text</td>
<td>text</td>
</tr>
<tr>
<td>text</td>
<td>text</td>
</tr>
<tr>
<td>text</td>
<td>text</td>
</tr>
<tr>
<td>text</td>
<td>text</td>
</tr>
</table>
My html code with inline css:
<div id="ggicci_syntax_highlighter" style="border: solid 3px black; cursor: text; overflow-x: auto; width: 100%;">
<table id="ggicci_outer_table" cellspacing="0" style="font-family:Consolas;">
<colgroup>
<col style="background-color: #44F;"><!-- You can set font here -->
<col style="background-color: #f4f4f4; width: 100%;">
</colgroup>
<tr>
<td></td><!-- corner -->
<td id="ggicci_language_text" style="font-size:25px; color: #777; font-family: Arial Black;"> <!-- header -->
C++
</td>
</tr>
<tr>
<td>
<table id="ggicci_line_number" style="font-size: 14px; color: #DDD;"><!-- You can set style here -->
<tr>
<td>1:</td>
</tr>
<tr>
<td>2:</td>
</tr>
<tr>
<td>3:</td>
</tr>
<tr>
<td>4:</td>
</tr>
<tr>
<td>5:</td>
</tr>
<tr>
<td>6:</td>
</tr>
<tr>
<td>7:</td>
</tr>
<tr>
<td>8:</td>
</tr>
</table>
</td>
<td>
<table id="ggicci_code_body" style="font-size: 14px; width: 100%;"><!-- You can set style here -->
<tr>
<td style="background: #FFF">
<span style="color:#FF7700; font-weight:bold;">#include</span> <iostream>
</td>
</tr>
<tr>
<td>
<span style="color:blue; font-weight:bold;">using</span> namespace std;
</td>
</tr>
<tr>
<td style="background: #FFF">
</td>
</tr>
<tr>
<td>
<span style="color:blue; font-weight:bold;">int</span> main()
</td>
</tr>
<tr>
<td style="background:#FFF;">
{
</td>
</tr>
<tr>
<td>
std::cout << <span style="color:#EB2244;">"Hello World!"</span> << std::endl;<span style="color:green;">//write "Hello World!" to console............................................................</span>
</td>
</tr>
<tr>
<td style="background: #FFF"> <span style="color:blue; font-weight:bold;">return</span> 0;</td>
</tr>
<tr>
<td>
}
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
and I can't make the content in div scroll when the text in a line in the table where the id is "ggicci_code_body" overflows. I'm new to css and now I'm designing a syntax highlighter for programming practice. So any solution? and why this can't work?
Add '<!doctype html>' at the start of html file.