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 */ }
Related
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>
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 am using float in css to display multiple tables vertically next to one another however float puts them without any spacing in between. How can I insert some gaps betwen these tables?
table{
float: left;
border:none;
border-collapse: collapse;
}
you shall use the margin property
table
{
margin:0 10px;
}
For info, the 0 corresponds to the above and under margin, and the 10 for the left and right margin.
You could also write it like margin(0 10px 0 10px); which stands for up - right - bottom - left
here you can use the {display:inline} instead of float
or you can use the padding or margin between tables/elements
table{
display: inline;
border:none;
border-collapse: collapse;
margin:0px 0px 0px 10px
}
I guess you're looking for this: JSFiddle
HTML
<table border="1" class="table1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
<table border="1" class="table2">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
CSS
.table1 {
float: left;
margin-right: 15px;
background: red;
}
.table2 {
float: left;
background: blue;
}
NOTE: I made table1 with margin-right - this will separate from table2. If you have more them 2 tables, add margin-right in left tables, or margin-left in right tables.
Is it possible at all?
I have table that fills its container. (width 100%)
Two of its columns (1st and 3rd) have minimum width, but middle one does not.
When I am narrowing the window, I want 1st and 3rd columns to stay at minimum width, while middle column have to collapse completely (when window is too narrow, just 1st and 3rd columns must be displayed).
Thanks.
There is simplified code of what I have:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>My first styled page</title>
<style type="text/css">
.overflow{
text-overflow: ellipsis;
word-break: break-all;
word-wrap: break-word;
}
.table{
width: 100%;
border-collapse: collapse;
border-spacing: 0;
}
.first{
min-width: 20px;
}
</style>
</head>
<body>
<table class="table">
<tr>
<td class="first"><div class="overflow">oneoneoneone</div></td>
<td class="second"><div class="overflow">twotwotwotwo</div></td>
<td class="first"><div class="overflow">threethreethree</div></td>
</tr>
</table>
</body>
</html>
You could do this with some basic CSS styling & media queries, here's an example
<table border=1>
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Col 1</td>
<td>Row 1 Col 2</td>
<td>Row 1 Col 3</td>
</tr>
<tr>
<td>Row 2 Col 1</td>
<td>Row 2 Col 2</td>
<td>Row 2 Col 3</td>
</tr>
<tr>
<td>Row 3 Col 1</td>
<td>Row 3 Col 2</td>
<td>Row 3 Col 3</td>
</tr>
<tr>
<td>Row 4 Col 1</td>
<td>Row 4 Col 2</td>
<td>Row 4 Col 3</td>
</tr>
</tbody>
<style>
#media only screen and (max-width:500px){
table td:nth-child(2), table th:nth-child(2) {
display:none;
}
}
</style>
So when the screen is smaller than 500px, the 2nd column will hide.
Fiddle showing it in action: http://jsfiddle.net/9rEgQ/2/
You could use CSS and a media query to hide the middle column when the screen reduced to a specified width.
For example:
#media all and (max-width:500px) {
.second {
display: none;
}
}
In this example, the second column would not be displayed when the screen was reduced to a width of less than 500px