I'm trying to make the black bar from the table td reach out all the way to the black border of the div. what am I doing wrong? I've been messing around with this for a while now and its starting to get to me. :( I've included all the css and html below. Hopefully someone can give me a hand with this. Thanks in advance!
<div style="background: #DCDCDC;border: 1px solid #000000;border-radius: 12px; vertical-align: top;width: 240px;height: 180px;">
<table width="100%">
<tr>
<td bgcolor="#000000" height="15"></td>
</tr>
<tr>
<td>f</td>
</tr>
</table>
</div>
You need overflow: hidden to hide the style outside of the parent.
border-spacing: 0 to remove the default spacing of the table.
* {
margin: 0;
padding: 0;
}
div {
background: #DCDCDC;
border: 1px solid #000000;
border-radius: 12px;
vertical-align: top;
width: 240px;
height: 180px;
overflow: hidden;
}
table {
border-spacing: 0;
width: 100%; }
<div>
<table>
<tr><td bgcolor="#000000" height="15"></td></tr>
<tr><td>f</td></tr>
</table>
</div>
Related
How can let the rows at the top (not at the bottom) with fixed tbody height of 500px!
html,body{
margin: 0;
padding: 0;
font-family: sans-serif;
font-size: 1rem;
}
main{
margin: 10px;
padding: 10px;
}
table{
border-collapse: collapse;
border: 1px solid;
width: 100%;
}
tr,th,td{
border: 1px solid;
padding: 3px;
text-align: center;
}
.minHeight{
height: 500px;
}
<table>
<thead>
<tr>
<th>Code Article</th>
<th>Code TVA</th>
<th>Remise</th>
</tr>
</thead>
<tbody class="minHeight">
<tr>
<td>100</td>
<td>10</td>
<td>2</td>
</tr>
</tbody>
</table>
I would clarify it as I get output like this:
But I want it to be like this:
Remove text-align:center on the td and add vertical-align:top
html,
body {
margin: 0;
padding: 0;
font-family: sans-serif;
font-size: 1rem;
}
main {
margin: 10px;
padding: 10px;
}
table {
border-collapse: collapse;
border: 1px solid;
width: 100%;
}
tr {
border: 1px solid;
padding: 3px;
}
th,
td {
border: 1px solid;
padding: 3px;
vertical-align: top;
}
.minHeight {
height: 500px;
}
<table>
<thead>
<tr>
<th>Code Article</th>
<th>Code TVA</th>
<th>Remise</th>
</tr>
</thead>
<tbody class="minHeight">
<tr>
<td>100</td>
<td>10</td>
<td>2</td>
</tr>
</tbody>
</table>
You are not very descriptive on what you want but I'll give it a try.
I think you mean that you want the numbers on top of the list under the name and not in the center of it's entire box.
If so, then one simple solution is to add padding to the bottom of your first row of data (td). The padding should be equal to the height of your liking (warning: if you add more data you will need to adjust the padding).
I have no access to change core HTML, only CSS, but the tables I am working with have a weird gap in the corners that I am trying to fix.
.tabular-container {
border: 2px solid #0093c9;
border-radius: 8px;
overflow: hidden;
box-sizing: border-box;
}
.heading-row {
background: #0093c9;
font-weight: bold;
}
table {
font-family: Arial;
width: 100%;
border-collapse: collapse;
background: white;
overflow-x: hidden;
}
th,
td {
padding: 10px;
text-align: left;
}
<div class="tabular-container">
<table class="">
<thead class="">
<tr class="heading-row">
<th colspan="2">Rounded corners table</th>
</tr>
</thead>
<tbody>
<tr class="tabular__row">
<td>kk</td>
<td>kk</td>
</tr>
<tr class="tabular__row">
<td colspan="2">This is a sample table only</td>
</tr>
</tbody>
</table>
</div>
Does turning the whole table and div background into the color and the tbody back to white do the trick?
.tabular-container {
background: #0093c9;
}
table {
font-family: Arial;
width: 100%;
border-collapse: collapse;
background: white;
overflow-x: hidden;
background: #0093c9;
}
tbody{
background: white;
}
.tabular-container {
border: 2px solid #0093c9;
border-radius: 8px;
overflow: hidden;
box-sizing: border-box;
background: #0093c9;
}
.heading-row th{
font-weight: bold;
}
table {
font-family: Arial;
width: 100%;
border-collapse: collapse;
background: white;
overflow-x: hidden;
background: #0093c9;
}
th,
td {
padding: 10px;
text-align: left;
}
tbody{
background: white;
}
<div class="tabular-container">
<table class="">
<thead class="">
<tr class="heading-row">
<th colspan="2">Rounded corners table</th>
</tr>
</thead>
<tbody>
<tr class="tabular__row">
<td>kk</td>
<td>kk</td>
</tr>
<tr class="tabular__row">
<td colspan="2">This is a sample table only</td>
</tr>
</tbody>
</table>
</div>
Simple, set: border-radius:0; on your table.
The browser is trying to set the radius of the table's corners to match, but is getting a rounding error. By using radius:0 you are forcing the browser to 'clip' the corner instead.
I am new on the techno asp.net (C#)I try to create one a table or a grid view which have column fix when one scroll vertically but the problem which I have it is when I want to scroll horizontally the two first columns must be fixed I try to use this code bellow I try to use the scroll to help user to see the data when we have too many lines can anyone try to help me please
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Scrollable HTML table with CSS Style</title>
<style type="text/css">
section {
position: relative;
border: 1px solid #000;
padding-top: 37px;
background: #B34C00;
width:40%;
}
.container {
overflow-y: auto;
height: 200px;
}
table {
border-spacing: 0;
width:100%;
}
td + td {
border-left:1px solid #000;
}
td, th {
border-bottom:1px solid #000;
background: #fff;
color: #000;
padding: 10px 25px;
}
th {
height: 0;
line-height: 0;
padding-top: 0;
padding-bottom: 0;
color: transparent;
border: none;
white-space: nowrap;
}
th div{
position: absolute;
background: transparent;
color: #fff;
padding: 9px 25px;
top: 0;
margin-left: -25px;
line-height: normal;
border-left: 1px solid #800;
}
</style>
</head>
<body>
<form id="form1">
<section class="">
<div class="container">
<table>
<thead>
<tr class="header">
<th>User Name<div>User Name</div></th>
<th>Education<div>Education</div></th>
<th>Location1<div>Location1</div></th>
<th>Location2<div>Location2</div></th>
<th>Location3<div>Location3</div></th>
<th>Location4<div>Location4</div></th>
<th>Location5<div>Location5</div></th>
</tr>
</thead>
<tbody>
<tr>
<td>Suresh Dasari</td><td>B.Tech</td><td>Chennai</td><td>Chennai</td><td>Chennai</td><td>Chennai</td><td>Chennai</td>
</tr>
<tr>
<td>Rohini Dasari</td><td>Msc</td><td>Chennai</td><td>Chennai</td><td>Chennai</td><td>Chennai</td><td>Chennai</td>
</tr>
<tr>
<td>Madhav Sai</td><td>MBA</td><td>Nagpur</td><td>Chennai</td><td>Chennai</td><td>Chennai</td><td>Chennai</td>
</tr>
<tr>
<td>Praveen Kumar</td><td>B.Tech</td><td>Guntur</td><td>Chennai</td><td>Chennai</td><td>Chennai</td><td>Chennai</td>
</tr>
<tr>
<td>Mahendra Dasari</td><td>CA</td><td>Chennai</td><td>Chennai</td><td>Chennai</td><td>Chennai</td><td>Chennai</td>
</tr>
<tr>
<td>Nagaraju Dasari</td><td>MCA</td><td>USA</td><td>Chennai</td><td>Chennai</td><td>Chennai</td><td>Chennai</td>
</tr>
<tr>
<td>Sateesh Alavala</td><td>MD</td><td>Vizag</td><td>Chennai</td><td>Chennai</td><td>Chennai</td><td>Chennai</td>
</tr>
<tr>
<td>Sudheer</td><td>B.Tech</td><td>Kakinada</td><td>Chennai</td><td>Chennai</td><td>Chennai</td><td>Chennai</td>
</tr>
</tbody>
</table>
</div>
</section>
</form>
</body>
</html>
I am Using Fixed column to my bootstrap Datatable. This link is
https://datatables.net/examples/styling/bootstrap
Added CSS file in your csHtml file
#Styles.Render("~/Content/fixedColumns.dataTables.min")
<style>
div.DTFC_LeftBodyLiner {
overflow-x: hidden;
}
div.DTFC_RightBodyLiner {
overflow-x: hidden;
}
</style>
Then Added Js File in your csHtml file :
<script src="~/Scripts/dataTables.fixedColumns.min.js"></script>
Using this code in your Js DataTable
$('#DataGrid').dataTable({
fixedColumns: {
leftColumns: 3,
rightColumns: 1
},
});
Whith the fiddle:
https://jsfiddle.net/nwcb1gwk/
When i apply float: left; display: block; to a <td>, the width of <td> is change (and the third block is outside).
I need to apply this for use overflow: hidden.
How i can do exactly the same size of the second table with float ?
.One {
float: left;
display: block;
//padding: 0px;
}
.All {
outline: 1px dotted lightgrey;
width: 50px;
background-color: blue;
}
div {
width: 150px;
zoom: 400%;
background-color: yellow;
}
table {
border-spacing: 0;
}
<div>
<table>
<tr>
<td class='All One'>X</td>
<td class='All One'>X</td>
<td class='All One'>X</td>
</tr>
</table>
</div>
<div>
<table>
<tr>
<td class='All'>X</td>
<td class='All'>X</td>
<td class='All'>X</td>
</tr>
</table>
</div>
Try to giving your table display:table and your td's display:table-cell and you dont need other codes. Here is all css i think you need;
table {
display: table;
}
.One {
display: table-cell;
//padding: 0px;
}
.All {
outline: 1px dotted lightgrey;
width: 50px;
background-color: blue;
}
You can add this to class .One
box-sizing: border-box;
This will include your 1px outline in 50px of td's width. by default it is box-sizing: content-box; which means that width and border are separate.
I have prepare one solution for you ..
Try this one
<html>
<head>
<style>
.One {
float: left;
display: block;
//padding: 0px;
}
.All {
outline: 1px dotted lightgrey;
width: 50px;
background-color: blue;
}
div {
width: 157px;
zoom: 400%;
background-color: yellow;
}
table {
border-spacing: 0;
}
</style>
</head>
<body>
<div>
<table>
<tr>
<td class='All One'>X</td>
<td class='All One'>X</td>
<td class='All One' >X</td>
</tr>
</table>
</div>
<div>
<table>
<tr>
<td class='All'>X</td>
<td class='All'>X</td>
<td class='All'>X</td>
</tr>
</table>
</div>
</body>
</html>
It will surely works for you.. Thank you
I read trough a lot of the posts here but those solutions don't seem to work for me.
I have a problem with the row because it should fit the image without those white spacings ont top:
#popuptable table, th, td, tr
table.popuptable {
border-width: 1px;
border-spacing: 2px;
border-style: outset;
border-color: #2778AF !important;
border-collapse: collapse;
background-color: white;
}
table.popuptable th {
margin-left: 20px !important;
border-width: 0px;
padding: 2px;
border-style: ;
border-color: #2778AF !important;
background-color: white;
-moz-border-radius: ;
}
table.popuptable td {
border-width: 0px;
padding: 2px;
border-style: ;
border-color: #2778AF !important;
background-color: white;
-moz-border-radius: ;
}
table.popuptable tr {
border-width: 0px;
padding: 2px;
border-style: ;
border-color: #2778AF !important;
background-color: white;
-moz-border-radius: ;
}
Where is my problem? I tried all combinations of height I could think of..
Update Html for the popup:
<div id="hidden-BE" style="display:none;" class="popuptable">
<table border="0" width="400">
<tbody><tr>
<th colspan="2"> Kanton BE </th>
</tr>
<tr>
<td width="125px"><img src="http://www.personnes-histoirerurale.ch/pimages/ch/be.gif" width="125"></td>
<td valign="top">
<b>Auswahl (Total: 4)</b><br>
<ul>
<li>Laur, Ernst Ferdinand (1871-1964)</li>
<li>Landis, Jakob (1926-)</li>
<li>Lampert, Octave</li>
<li>Laur-Schaffner, Sophie (1875-1960)</li>
</ul>
</td>
</tr>
</tbody></table>
</div>
Here is one way of adjusting the layout to get a good image fit.
For the HTML, add valign="top" to the table cell holding the image:
<table border="0" width="400" class="popuptable">
<tbody>
<tr>
<th colspan="2">Kanton BE</th>
</tr>
<tr>
<td width="125px" valign="top">
<img src="http://www.personnes-histoirerurale.ch/pimages/ch/be.gif" width="125">
</td>
<td valign="top">
<b>Auswahl (Total: 4)</b>
<br>
<ul>
<li>Laur, Ernst Ferdinand (1871-1964)</li>
<li>Landis, Jakob (1926-)</li>
<li>Lampert, Octave</li>
<li>Laur-Schaffner, Sophie (1875-1960)</li>
</ul>
</td>
</tr>
</tbody>
</table>
For the CSS, make the following modifications:
table.popuptable td {
border-width: 1px;
padding: 0px; /* adds spacing above image, so remove... */
border-style: solid;
border-color: #2778AF !important;
background-color: white;
-moz-border-radius: ;
}
table.popuptable img {
display: block;
}
table.popuptable ul {
border: 1px dashed red;
margin: 0 ;
}
Use display: block on the img to get rid of the extra space below the baseline that gets inserted with inline elements.
You also have 2px padding in the table cells, which you may want to remove or keep as needed.
Finally, the default margins on the ul may cause the height of the text block to be higher than the image, so adjust those as necessary.
See fiddle: http://jsfiddle.net/audetwebdesign/HqQWY/
use the set of properties to make the image fit
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
Ditch the tables, do the pop-up with divs, set the image as background image for the div:
<div class="flag"></div>
And set background-size: cover;
http://www.w3schools.com/cssref/css3_pr_background-size.asp