<table class="project-table">
<thead>
<tr class="align-top">
<td class="short-col heading">Project Name</td>
<td class="short-col heading align-center">Project Id</td>
<td class="short-col heading">Date & Time</td>
<td class="short-col heading">Student</td>
</tr>
</thead>
<tbody>
<tr class="bottom-row-dashed">
<td class="long-col">
<div class="achievement-box float-left">Winner</div>
<div class="float-left margin-left">Intrusion Detection System in Cloud Architecture</div>
<div class="clear"></div>
</td>
<td class="short-col align-center">1</td>
<td class="short-col">01 Apr 2014, 09:30 PM</td>
<td class="short-col">Sayan Chowdhury</td>
</tr>
<tr>
</tr></tbody>
</table>
The stylus file:
table.project-table
font-size: 13px
margin-top: 10px
width: 100%
border-collapse: collapse
.bottom-row-dashed
border-bottom: 1px dashed border-color
.margin-right
margin-right: 2px
.margin-left
margin-left: 2px
td
&.short-col
width: 1%
&.large-col
width: 20%
&.medium-col
width: 10%
tr
&.align-top
vertical-align: top
The div that contains "Winner" and "Intrusion Detection System in Cloud Architecture" are float left. I added word-wrap:break-word; but it did not help breaking the breaking the term "Intrusion Detection System in Cloud Architecture". The short-col and long-col class defines the width of the table column
How can I break the term "Intrusion Detection System in Cloud Architecture" based on the width.?
EDIT: I want to have "Intrusion Detection System in Cloud Architecture" and "Winner" on the same line but as the word should break off in the middle based on the width
Check out the Demo
I just added a break tag
<div class="float-left margin-left">Intrusion Detection<br> System in Cloud Architecture</div>
Output fiddle
Another way
Another way of Doing it
Setting of max width does the trick
th{
padding-left:30px;
}
td{
padding-left:30px;
max-width: 200px; /*or whatever*/
word-wrap: break-word;
}
th:first-child{
padding-left:0px;
}
td:first-child{
padding-left:0px;
}
Output using word wrap and max-width
Check this out latest
display:inline;
Give some width to the first td of first row like:
Check the demo:FIDDLE
<table class="project-table">
<thead>
<tr calss="align-top">
<td class="short-col heading" width="200px">Project Name</td>
<td class="short-col heading align-center">Project Id</td>
<td class="short-col heading">Date & Time</td>
<td class="short-col heading">Student</td>
</tr>
</thead>
<tbody>
<tr class="bottom-row-dashed">
<td class="long-col" >
<div class="achievement-box float-left">Winner</div>
<div class="float-left margin-left">Intrusion Detection System in Cloud Architecture</div>
<div class="clear"></div>
</td>
<td class="short-col align-center">1</td>
<td class="short-col">01 Apr 2014, 09:30 PM</td>
<td class="short-col">Sayan Chowdhury</td>
</tr>
<tr>
</tr></tbody>
</table>
Related
I'm trying to create table which looks like below:
I have tried using margin-right property ,and also border spacing ,colspan but not able to achieve it!
Here is my link to codepen:https://codepen.io/saisree/pen/jwwwEZ
<tr >
<td style="padding-top:10px;"colspan="2"class=" fixed text-center">
<span class=" border6 bold pull-left">2210 924-16(267) </span><span class="boxed1"></span></tr>
Any kind of help is highly appreciated.
You need two tds in each tr. In the first 4 rows you apply the attribute colspan="2" to the second td tag, in the rows after that you apply colspan="2" to the first td tag. That's basically all. So actually, there are three TDs in each row, but as each row has a td with a colspan, you only see two in each row.
The width will depend on the contents by default, but you can use width settings for the tds of course. You can not use margins on tds.
table {
border-collapse: collapse;
width: 60%;
margin: 0 auto;
}
td {
border: 1px solid #ddd;
min-width: 35%;
}
td:nth-child(2) {
min-width: 50%;
}
<table>
<tr>
<td>AAA</td>
<td colspan="2" ;>BBB</td>
</tr>
<tr>
<td>AAA</td>
<td colspan="2" ;>BBB</td>
</tr>
<tr>
<td>AAA</td>
<td colspan="2" ;>BBB</td>
</tr>
<tr>
<td>AAA</td>
<td colspan="2" ;>BBB</td>
</tr>
<tr>
<td colspan="2" ;>CCC</td>
<td>DDD</td>
</tr>
<tr>
<td colspan="2" ;>CCC</td>
<td>DDD</td>
</tr>
<tr>
<td colspan="2" ;>CCC</td>
<td>DDD</td>
</tr>
</table>
I need to wrap text within a <td> element, but I can't use the css table-layout property as the output is to html e-mail body and Outlook doesn't support the table-layout property.
Is there some other way to wrap text within a <td> element, or do I need to do the line breaking and measuring manually in code?
Here is an example of what I am trying to acheive:
td {
border: solid black 1pt;
font-family: arial;
font-size: 10pt
}
thead td{
text-align:center;
font-weight:bold;
}
table {
border-collapse: collapse
}
<html>
<body>
<table style="width:35pt;height:24pt;table-layout:fixed">
<thead>
<tr>
<td style="width:35pt;height:12pt">Good</td>
</tr>
</thead>
<tbody>
<tr>
<td style="width:35pt;height:12pt;word-wrap:break-word">Costingly Cost Cost</td>
</tr>
</tbody>
</table>
<div style="height:50pt"></div>
<table style="width:35pt;height:24pt;">
<thead>
<tr>
<td style="width:35pt;height:12pt">Bad</td>
</tr>
</thead>
<tbody>
<tr>
<td style="width:35pt;height:12pt" nowrap>Costingly Cost Cost</td>
</tr>
</tbody>
</table>
</body>
</html>
Use the Microsoft proprietary word-break:break-all;
<td style="word-break:break-all;">
That should fix things.
You can try this:
<tr>
<td nowrap>Never increase, beyond what is necessary, the number of entities required to explain anything</td>
<td>Never increase, beyond what is necessary, the number of entities required to explain anything</td>
I dont know if this is possible but...I am trying to format a table with css, to have a specific look. This is for a wordpress site that will be updated by my client. The problem is that she is going to be copying/pasting tables with a specific format, and i want the table to have that format without her doing any extra work.
This is what i have so far.
I want the cells with the Bold text to not have a dotted line bellow them.
Right now i am formating the tr lines to add the dotted lines like this:
html
<table class="dotted" border="0" width="450" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td colspan="2"><strong>Argento</strong></td>
</tr>
<tr>
<td>Cake Box Lady</td>
<td style="text-align: right;">Postcard from Morocco</td>
</tr>
<tr>
<td colspan="2"><strong>Bellini</strong></td>
</tr>
.....
css
.dotted tr:nth-child(even) {
text-decoration: none;
border-bottom: 1px white dotted;
}
.dotted tr:nth-child(odd) {
text-decoration: none;
border-bottom: 1px white dotted;
}
Is there a way i can do this without having to add a custom class tag for each that has the bold text in it ?
This is how i want it to look like, but this is all done manually...That's what i am trying to avoid.
ps: Sometimes the tables might have more than 1 'data' under the bold letters so its not always odd, even lines, when it comes to the 'title' and the 'plays' bellow them. (this is a site for musical plays)
-Thanks
#Manoj Kumar Yeah the bold items are always under colspan 2
Since you stated the above comment, I have a CSS hack for it.
Change your CSS to have dotted border only on td instead of tr elements.
Target the elements with colspan=2 with attribute selector to have no border.
table {
background: gray;
}
.dotted td:nth-child(even) {
text-decoration: none;
border-bottom: 1px white dotted;
}
.dotted td:nth-child(odd) {
text-decoration: none;
border-bottom: 1px white dotted;
}
.dotted td[colspan="2"] { /* Attribute selector */
border: 0 none;
}
<table class="dotted" border="0" width="450" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td colspan="2"><strong>Argento</strong>
</td>
</tr>
<tr>
<td>Cake Box Lady</td>
<td style="text-align: right;">Postcard from Morocco</td>
</tr>
<tr>
<td colspan="2"><strong>Bellini</strong>
</td>
</tr>
<tr>
<td colspan="2"><strong>Argento</strong>
</td>
</tr>
<tr>
<td>Cake Box Lady</td>
<td style="text-align: right;">Postcard from Morocco</td>
</tr>
<tr>
<td colspan="2"><strong>Bellini</strong>
</td>
</tr>
<tr>
<td colspan="2"><strong>Argento</strong>
</td>
</tr>
<tr>
<td>Cake Box Lady</td>
<td style="text-align: right;">Postcard from Morocco</td>
</tr>
<tr>
<td colspan="2"><strong>Bellini</strong>
</td>
</tr>
<tr>
<td colspan="2"><strong>Argento</strong>
</td>
</tr>
<tr>
<td>Cake Box Lady</td>
<td style="text-align: right;">Postcard from Morocco</td>
</tr>
<tr>
<td>Cake Box Lady</td>
<td style="text-align: right;">Postcard from Morocco</td>
</tr>
<tr>
<td>Cake Box Lady</td>
<td style="text-align: right;">Postcard from Morocco</td>
</tr>
<tr>
<td colspan="2"><strong>Bellini</strong>
</td>
</tr>
</tbody>
</table>
I'm encountering a problem when styling an dynamic generated table. The user can choose how many columns there have to be, some of them have got a fixed length. How can I let the other give a percentage of the space left, without having to specify the exact width of the columns every time AND without ending up with different column widths with different data/different browsers?
Example:
<style type="text/css">
table{
width:800px;
border:1px solid #CCCCCC;
/* table-layout: fixed; */
}
table td {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
border:1px solid #EEEEEE;
}
table tbody td.active{
text-align:center;
width:100px; /* fixed */
}
table tbody td.option{
width:100px; /* fixed */
}
table tbody td.nonfixed{
width:auto;
}
</style>
<table>
<thead>
<tr>
<td>Name</td>
<td>Description</td>
<td>Active</td>
<td colspan="2">Options</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="5">+ Add new row<td>
</tr>
</tfoot>
<tbody>
<tr>
<td class="nonfixed">[Name 1]</td>
<td class="nonfixed">[Description 1]</td>
<td class="active">[X]</td>
<td class="option">Edit</td>
<td class="option">Delete</td>
</tr>
<tr>
<td class="nonfixed">[Name 2]</td>
<td class="nonfixed">[Description 2]</td>
<td class="active">[0]</td>
<td class="option">Edit</td>
<td class="option">Delete</td>
</tr>
</tbody>
</table>
In the example both "nonfixed" columns should have the exact same width. This should also work when the user adds a nonfixed column or switches the first column with the last etc.
Who's able to help me out?
I see two possible approaches... either use a script to calculate the flexible-width columns' widths and average them, or use nested tables to split the two flex cols at 50%:
<table>
<tr>
<td class="fixed"></td>
<td class="fixed"></td>
<td class="fixed"></td>
<td class="flex-wrapper">
<table width="100%">
<tr>
<td width="50%"></td>
<td width="50%"></td>
</tr>
</table>
</td>
</tr>
</table>
Do you know, how to fix the size of a td Width and Height in a table allowing the rest of td on table to expand as needed?
The problem is that when there is data inside of td's it will not shrink more than the data, but if is empty it will shrink all the way, if you expand the window the td will expand.
I would like to keep the size of the td whether you expand or shrink the window and whether the td has data inside or not.
Also I need to keep the rest of td's able to expand as you expand window.
Class tableContainerRow2 is the one I need it to be a fixed size.
e.g.
<style>
.divContainer {
margin:10px;
background-color:#C7D8EE;
border:2px solid #0076BF;
text-align:left;
}
.tableContainer {
color:#0076BF;
margin: -10px 0px -10px 0px;
border-spacing: 10px;
empty-cells:show;
width:90%;
}
.tableContainerRow2 {
background-color:white;
border:2px solid #0076BF;
}
</style>
<div class="divContainer">
<table class="tableContainer" cellspacing="10px">
<tr>
<td width="18%" style="white-space:nowrap;" >NHS Number</td>
<td width="17%"> </td>
<td width="10%" style="white-space:nowrap;">Date of Visit</td>
<td width="10%"> </td>
<td colspan="3" style="white-space:nowrap;">Care Time Started</td>
<td width="4%"> </td>
<td width="5%"> </td>
<td width="25%" rowspan="2" style="font-weight:bold;vertical-align:middle;white-space:nowrap;">Tick when<br/> care starts</td>
</tr>
<tr >
<td width="18%" class="tableContainerRow2"> 0123456789</td>
<td width="17%"> </td>
<td width="10%" class="tableContainerRow2"> 12/12/09</td>
<td width="10%"> </td>
<td width="5%" class="tableContainerRow2"> 12</td>
<td width="1%" > :</td>
<td width="5%" class="tableContainerRow2"> 10</td>
<td width="4%"> </td>
<td width="5%"> ☑</td>
<td width="10%" > </td>
</tr>
</table>
</div>
just set the width of the td/column you want to be fixed and the rest will expand.
<td width="200"></td>
This will take care of the empty td:
<td style="min-width: 20px;"></td>