I have the below HTML code, where i need to wrap the sentence inside the cell, as the sentence is overlapping to the next cells. how to use a wrap function ? I need to keep the below code intact and put the extra function of wrapping.
<table width="100%">
<table-body border = "1px solid black">
<table-row border = "1px solid black" font-size="10px" background-color="#00a7d4" text-align="center" color="white">
<table-cell border = "1px solid black" number-columns-spanned="3" padding="3px">
<block><apex:outputText >{!QL.SBQQ__Product__r.Short_Description_Slides_Appliances__c}
</apex:outputText></block></table-cell>
</table-row>
</table-body>
</table>
You can try with word-wrap: break-word if you want to wrap the cell to match the content. Otherwise you can try to use overflow:scroll to make it scrollable.
td {
max-width: 100px;
word-wrap: break-word;
}
<table border = "1">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2dsadasdasdasdasdasdasda</td>
</tr>
</table>
Related
expecting the code to for that image that i have attached
In order to create such a table, you'd need to implement the rowspan and colspan attributes. colspan represents the number of columns a cell should span (to the right), and rowspan represents the number of rows a cell should span (downward). For instance, if I had a <td colspan="2"> tag, the td element would take up the space of two columns. Here's an example of that behavior:
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
<table>
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
<tr>
<td colspan="2">This element occupies the space of two columns.</td>
</tr>
</table>
Utilizing rowspan and colspan, I was able to create code that generates a look-alike of the table you attached (CSS code solely for table visibility):
table,
td {
border: 1px solid black;
border-collapse: collapse;
}
<table>
<tr>
<td rowspan="2"></td>
<td colspan="2">Average</td>
<td rowspan="2">Red Eyes</td>
</tr>
<tr>
<td>Height</td>
<td>Weight</td>
</tr>
<tr>
<td>Males</td>
<td>1.9</td>
<td>0.003</td>
<td>40%</td>
</tr>
<tr>
<td>Females</td>
<td>1.7</td>
<td>0.002</td>
<td>43%</td>
</tr>
</table>
I have tried to make this work but it always adds an extra column in the first row even when i clearly stated it has only 1 column. What i want to make is like this : this is what i want to make
But this is what i get like this
The only way to make it like the first picture is by using 2 tables which is what i used but is there no way to do it with 1 table ?
My code :my code for the second picture
Use the colspan attribute.
td {
border: solid black 1px;
height: 20px;
}
<table>
<tr>
<td colspan="3">colspan = 3</td>
</tr>
<tr>
<td>colspan = 1</td>
<td>colspan = 1</td>
<td>colspan = 1</td>
</tr>
<tr>
<td colspan="3">colspan = 3</td>
</tr>
</table>
You can use the colspan attribute.
The colspan attribute in HTML specifies the number of columns a cell should span. It allows the single table cell to span the width of more than one cell or column.
Below is a working code snippet which looks almost similar to your requirement.
table, tr, td, th {
border: 1px solid black;
border-collapse: collapse;
}
table {
width: 100%;
}
.row1, .row2 {
height: 100px;
}
.row2 {
vertical-align: top;
}
.row1, .row3 {
text-align: center;
}
<table>
<tr class="row1">
<td colspan="3">Your Name</td>
</tr>
<tr class="row2">
<td>Course 1</td>
<td>Course 2</td>
<td>Course 3</td>
</tr>
<tr colspan="3" class="row3">
<td colspan="3">Social Media accounts</td>
</tr>
</table>
I have a table with rows/columns inverted, as in HTML Table with vertical rows . I would like to divide some of the table cells in two.
HTML
<table border="1" class="test1">
<tbody>
<tr>
<td>row 1, cell 1</td>
<td>row 1 cell 2</td>
<td> row 1 cell 3 </td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td><table><tr><td>row 2,</td><td> cell 2</td></tr></table></td>
<td><table><tr><td>row 2,</td><td> cell 3</td></tr></table> </td>
</tr>
</tbody>
</table>
CSS
table.test1 >tbody > tr { display: block; float: left; }
table.test1 >tbody > tr > td { display: block; }
Note that I need to put tbody tag because some browsers add it automatically which could mess up my css instruction on direct children.
This works fine for 2x2 table, but the alignment of the cells get messed up already for 2x3 table (and I need to do this for larger table). Is there any way to do this with CSS only? (I would rather avoid java script). Thank you in advance.
Besides the fact that in most cases div container would make more sense you could use colspan for your table. This was introduced with HTML 4.01 was exactly designed for cases like this.
<table border="1" class="test1">
<tbody>
<tr>
<td>row 1, cell 1</td>
<td colspan="2">row 1 cell 2</td>
<td colspan="2"> row 1 cell 3 </td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2,</td>
<td> cell 2</td>
<td>row 2,</td>
<td> cell 3</td>
</tr>
</tbody>
</table>
I have a table with two rows. The second row consists of a long text in a colspan="2". How can this text be wrapped so the table is not wider then the two first row cells? I can't set a fixed width for the table, because the first two cells are dynamic.
http://jsfiddle.net/qLpuq/1/
<table>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td colspan="2" style="width: 0" >Very long cell that should just be as long as the first two cells and wrap, but not take all the screen width.</td>
</tr>
</table>
I wrongly assumed, that style="width: 0" would work on that cell.
I’m afraid there’s no direct solution. You could play with JavaScript, creating copy of the table containing only the first row, get its width, discard the copy, and use the width to set the width of your real table. Combined with the setting table-layout: fixed, this should handle the situation. You can simplify the approach so that you do not create a copy of the table but instead remove the second row, later add it back. It gets rather ugly:
<!doctype html>
<title>Hack</title>
<style>
table { table-layout: fixed }
tr:first-child td { white-space: nowrap }
</style>
<table id=tbl>
<tbody id=tbody>
<tr>
<td id=cell1>Cell 1</td>
<td id=cell2>Cell 2</td>
</tr>
<tr id=row2><td colspan=2>
Very long cell that should just be as long as the first two cells and
wrap, but not take all the screen width.
</table>
<script>
var tbl = document.getElementById('tbl');
var tbody = document.getElementById('tbody');
var row2 = document.getElementById('row2');
var cell1 = document.getElementById('cell1');
var cell2 = document.getElementById('cell2');
tbody.removeChild(row2);
var width = tbl.clientWidth;
var width1 = cell1.clientWidth;
var width2 = cell2.clientWidth;
tbody.appendChild(row2);
cell1.style.width = width1 + 'px';
cell2.style.width = width2 + 'px';
tbl.style.width = width + 'px';
</script>
A completely different idea is to use a workaround where the long text is not in a cell but in a caption element, placed at the bottom of the table:
<table>
<caption align=bottom style="text-align: left">
Very long cell that should just be as long as the first two cells and
wrap, but not take all the screen width.
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
</table>
It might be usefull for you..
<table style="width:300px;" border="1">
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td colspan="2" style="width: 70%;" >Very long cell that should just be as long as the first two cells and wrap, but not take all the screen width.</td>
</tr>
</table>
Update after question update
<table style="width:100%;" border="1">
<tr>
<td style="width: 50%;">Cell 1</td>
<td style="width: 50%;">Cell 2</td>
</tr>
<tr>
<td colspan="2" style="width: 70%;" >Very long cell that should just be as long as the first two cells and wrap, but not take all the screen width.</td>
</tr>
</table>
Use max-width with the % of colspan2
<table style="width:100%;" border="1">
<tr>
<td style="width: 50%;">Cell 1</td>
<td style="width: 50%;">Cell 2</td>
</tr>
<tr>
<td colspan="2" style="max-width: ??%;" >Very long cell that should just be as long as the first two cells and wrap, but not take all the screen width.</td>
</tr>
</table>
how can i increase the space in this table "Row 1, cell 1"?
<html>
<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>
</html>
pls check here for the image:
http://img227.imageshack.us/img227/6166/htmln.png
is this correct:
<table border="1" td.my-cell { padding:100px; }>
<tr>
<td class="my-cell">Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>
You can either use cellpadding or using css
.cellpadding {
padding-left: 5px;
padding-right: 5px;
}
<td class="cellpadding">Row 1, cell 1</td>
EDIT Your edited post is wrong....do this:
<table border="1">
<tr>
<td style="padding-left: 5px; padding-right: 5px;">Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>
You can add a class to that specific cell and then use that class-name to apply css:
.larger {
height: 2em;
width: 4em;
padding: 2em;
}
<!-- rest of table -->
<td class="larger">Row 1, cell 1</td>
<!-- rest of table -->
Or you could use specific style-rules to apply a particular style:
tr td:first-child /* selects the first td within a tr */
Though this would apply to the first td of every row.
elaborate on "space"? you can add padding to the td if thats what you mean by "space"
table td { padding:5px; }
if you just want that cell bigger, add a calss
table td.my-cell { padding:5px; }
<td class="my-cell">Row 1, cell 1</td>
or do you mean
<td>Row 1, cell1</td>
you can increase the space between words like this:
table td { word-spacing: 20px; /* adjust */ }