I have an html file as inserted in the image file and i have to make the heading of it fixed and the rest table scrollable by using CSS.
I found the css to do that but my problem is that after inserting the css in html file the formatting for the header and data does not match .Suggest me whats wrong in my css my css is as following.
I want my formatting should not be disturbed only the header should be fixed up.
<style type="text/css">
div.tableContainer
{
clear: both;
border: 1px solid #963;
height: 300px;
overflow: hidden;
width: 1000px
}
html>body thead.fixedHeader tr
{
display: block
}
thead.fixedHeader th
{
background: #C96;
border-left: 1px solid #EB8;
border-right: 1px solid #B74;
border-top: 1px solid #EB8;
font-weight: normal;
padding: 4px 3px;
text-align: left
position: relative
width: 200px
}
html>body tbody.scrollContent {
display: block;
height: 300px;
overflow: auto;
width: 100%
}
tbody.scrollContent td, tbody.scrollContent tr.normalRow td {
background: #FFF;
border-bottom: none;
border-left: none;
border-right: 1px solid #CCC;
border-top: 1px solid #DDD;
padding: 2px 3px 3px 4px
}
html>body thead.fixedHeader th +th {
width: 50px
}
</style>
this is the image for html file i was not able to insert the source code of it.
add margin to table like jsfiddle.net/h5t98/
table
{
margin-top: 26px;
width: 138px;
}
.month
{
width: 79px;
}
.saving
{
width:49px;
}
I have given fixed column width you can change according to your max column width.
Related
I was writing some CSS for a very common user login form, except that when I logged in from another computer with the same browser (Firefox) and operating system (Ubuntu), some strange white borders emerged on the outside.
What's even stranger is that they tend to appear and disappear simply by resizing the window.
Because? how can this be prevented?
Thanks everyone for the help! :)
HTML:
<div class="npt nptFocus">
<span>Aa</span>
<input type="text" name="usr" placeholder="Nickname">
</div>
LESS:
// Palette
#main_color: blue;
#main: darken(saturate(#main_color, -97%), 25%);
#neutral: saturate(darken(#main_color, -25%), -25%);
#verde: #118769;
#rosso: #fe5f55;
#bianco: darken(saturate(#main_color, -40%), -45%);
#v_soft = 10%;
#v_medium = 25%;
#v_hard = 40%;
#neutral_dark: darken(#neutral, #v_soft);
#verde_dark: darken(#verde, #v_soft);
#rosso_dark: darken(#rosso, #v_hard);
#main_light: lighten(#main, #v_hard);
#main_dark: darken(#main, 8%);
#radius: 5px;
.npt {
display: table;
background: #bianco;
border-radius: #radius;
border: solid 1px #main_light;
width: 100%;
overflow: hidden;
input, span{
display: table-cell;
padding: 10px;
transition: 0.25s;
}
input {
border: none;
background: none;
border-radius: 0px;
color: #main;
width: 100%;
}
span {
border-right: solid 1px darken(#main_light, -15%);
color: darken(#main, -40%);
background: darken(#main_light, -25%);
padding-left: 15px;
padding-right: 15px;
width: 55px;
}
&.nptFocus {
border: solid 1px #neutral_dark;
span {
border-right: solid 1px #neutral_dark;
color: #bianco;
background: #neutral_dark;
}
}
}
SCREEN:
UPDATE 1: Added compiled CSS
.npt {
display: table;
background: #ebebfa;
border-radius: 5px;
border: solid 1px #a3a3a8;
width: 100%;
overflow: hidden;
}
.npt input,
.npt span {
display: table-cell;
padding: 10px;
transition: 0.25s;
}
.npt input {
border: none;
background: none;
border-radius: 0px;
color: #3e3e42;
width: 100%;
}
.npt span {
border-right: solid 1px #cacace;
color: #a3a3a8;
background: #e5e5e6;
padding-left: 15px;
padding-right: 15px;
width: 55px;
}
.npt.nptFocus {
border: solid 1px #6363e9;
}
.npt.nptFocus span {
border-right: solid 1px #6363e9;
color: #ebebfa;
background: #6363e9;
}
.npt.nptError {
border: solid 1px #fe5f55;
}
.npt.nptError span {
border-right: solid 1px #fe5f55;
color: #ebebfa;
background: #fe5f55;
}
.npt.nptError.nptFocus {
border: solid 1px #d38580;
}
.npt.nptError.nptFocus span {
border-right: solid 1px #d38580;
background: #d38580;
}
.npt.nptOk {
border: solid 1px #118769;
}
.npt.nptOk span {
border-right: solid 1px #118769;
color: #ebebfa;
background: #118769;
}
.npt.nptOk.nptFocus {
border: solid 1px #6cac9b;
}
.npt.nptOk.nptFocus span {
border-right: solid 1px #6cac9b;
background: #6cac9b;
}
UPDATE 2:
Following the help of #Manas Khandelwal and the tests carried out together, it seems that this is due to a browser rendering error as the logo above the form, having the width declared as a percentage, will never have a height with an integer value .
Ideas?
Really the only solution is really having to round all the heights via JavaScript?
$('.roundHeight').each(function(){
if(!$(this).is("[data-exmargin]")) $(this).attr('data-exmargin',parseFloat($(this).css('marginTop')));
var d = parseFloat($(this).attr('data-exmargin')) - ($(this).height() - Math.floor($(this).height()));
$(this).css('marginTop', d + 'px');
});
Add outline: none; to the input element;
Codepen: https://codepen.io/manaskhandelwal1/pen/WNGgQwP
I tried using this guy's tutorial of making a 2 column layout:
http://www.vanseodesign.com/css/2-column-layout-code/
Here's how mine came out : / http://jsfiddle.net/WrpA8/
The CSS:
#container {
width: 800px;
margin: 40px auto;
border: 1px solid black;
}
#header {
border: 1px solid black;
}
#sidebar {
float: left;
width: 200px;
padding: 4px;
border: 1px solid black;
}
#content {
float: left;
width: 600px;
padding: 4px;
border: 1px solid black;
}
#footer {
clear: both;
border: 1px solid black;
}
Border and padding contribute to an element's overall width. Try setting the border and padding to 0 and you'll see that the layout works as expected. If you want a border and padding, you'll have to factor their size in when you size the main element.
Your padding and border actually are eating up your content of 600px. So, try to make it to 580px for example and it will work.
#content {
float: left;
width: 580px;
padding:4px;
border: 1px solid black;
}
or of course you could remove padding and border altogether if you want and stay with 600px size.
Check the demo here
I have my td's set with a height on them, but on mobile devices such as my iPad and iPhone, the td background and border flows out of the td and into the tr. I recreated my exact code to show you what it NORMALLY looks like on my desktop, but as you can imagine there's probably a bug in my code which is allowing it to flow into the tr's
#tstyle2 {
width: 1000px;
border-top: 1px solid #e8e6e6;
border-bottom: 1px solid white;
}
#tstyle2 tr {
height: 160px;
border-bottom: none;
border-collapse: separate;
border-top: 1px solid white;
border-bottom: none;
width: 1000px;
}
#tstyle2 td {
border-top: none;
display: block;
height: 130px;
background-color: white;
border-left: 4px solid #bd6ec1;
box-shadow: 0px 3px 5px #b5b6b6;
}
http://jsfiddle.net/338cR/
I managed to find the solution:
I had to add
display:block;
to the #tstyle2 tr {}
and then add
width: 1000px;
to the #tstyle2 td {}
I have two "inline-block" buttons, see the image below:
But, if you click, you will see the other button two pixels down.
Example: http://jsfiddle.net/caio/EUjeY/.
.button {
border-radius: 2px;
border: 1px solid #ddd;
border-bottom: 3px solid #ccc;
background: #eee;
padding: 5px 10px;
display: inline-block;
}
.button:hover {
background: #e7e7e7;
}
.button:active {
border-bottom: 1px solid #ddd;
padding: 7px 10px 5px;
}
Can you help me to prevent this?
Thanks.
you can add this to your .button class:
vertical-align: top;
Working example: http://jsfiddle.net/uW7Sa/1/
Just give .button the css property float: left and both buttons will remain at the same location. This is because float: left removes the button from the flow of the document, so aside from the containing div, it isn't affected by other, inline elements:
.button {
border-radius: 2px;
border: 1px solid #ddd;
border-bottom: 3px solid #ccc;
background: #eee;
padding: 5px 10px;
display: inline-block;
float: left;
}
DEMO
I would provide more code because I'm using a float here, but I don't know what the rest of your document looks like, so I can't compensate.
I want to fix the table width using Display Tag.
.displayTable table {
border: 1px solid #666;
width: 100%;
margin: 20px 0 20px 0 !important;
}
.displayTable th, .displayTable td {
padding: 2px 4px 2px 4px !important;
text-align: left;
vertical-align: top;
width: 100%
}
.displayTable thead tr {
background-color: #9999CC;
}
.displayTable th.sorted {
background-color: #9999CC;
}
.displayTable th a,.displayTable th a:visited {
color: black;
}
.displayTable th a:hover {
text-decoration: underline;
color: black;
}
.displayTable th.sorted a,.displayTable th.sortable a {
background-position: right;
display: block;
width: 100%;
}
.displayTable th.sortable a {
background: url(../img/arrow_off.png) no-repeat right center ;
}
.displayTable th.order1 a {
background: url(../img/arrow_down.png) no-repeat right center ;
}
.displayTable th.order2 a {
background: url(../img/arrow_up.png) no-repeat right center;
}
.displayTable tr.odd {
background-color: #fff
}
.displayTable tr.tableRowEven,.displayTable tr.even {
background-color: #fff
}
.displayTable div.exportlinks {
background-color: #eee;
border: 1px dotted #999;
padding: 2px 4px 2px 4px;
margin: 2px 0 10px 0;
width: 79%;
}
.displayTable span.export {
padding: 0 4px 1px 20px;
display: inline;
display: inline-block;
cursor: pointer;
}
.displayTable span.excel {
background-image: url(../img/ico_file_excel.png);
}
.displayTable span.csv {
background-image: url(../img/ico_file_csv.png);
}
.displayTable span.xml {
background-image: url(../img/ico_file_xml.png);
}
.displayTable span.pdf {
background-image: url(../img/ico_file_pdf.png);
}
.displayTable span.rtf {
background-image: url(../img/ico_file_rtf.png);
}
.displayTable span.pagebanner {
background-color: #eee;
border: 1px dotted #999;
padding: 2px 4px 2px 4px;
width: 79%;
margin-top: 10px;
display: block;
border-bottom: none;
}
.displayTable span.pagelinks {
background-color: #eee;
border: 1px dotted #999;
padding: 2px 4px 2px 4px;
width: 79%;
display: block;
border-top: none;
margin-bottom: -5px;
}
Depends on the data loaded, the table width varies. So, I want to make it look better by fixing the width of table. But I can't. How can I make it to fix the table width?
I try to wrap the Display with Div and set the css class of Div too. But It still doesn't work (for both display:table-cell or display:inline-block;. Thanks.
.commonList{
overflow: hidden;
background: #c0c0c0;
display: table-cell
text-align: center;
width: 100%;
height: 100%;
}
Edited: When I try to wrap the display table with Div of the above css setting, table width become 100% . but as each of the column of table has various width, it becomes so ugly because the first column becomes so wide (which only display id ,1 ,2 ,3 etc) And even my display tag pagination gone. How can I solve it? Thanks.
.displayTable table {
table-layout:fixed;
}
Specify table layout as fixed and that will solve ur problem
Here is my solution. for each columns, specify a certain class and use in Display Tag.
.displayTable {
border: 1px solid #666;
width: 100%;
margin: 20px 0 20px 0 !important;
}
.colId{
width: 2%;
}
<display:column class="colId">