Category Archives: CSS

Sticky (Fixed) Column of a table

#mousewheel_example{
    overflow-y:hidden;
    overflow-x:auto;
    margin-top:5px;
    padding:0;
}
#itable tr th, #itable tr td{
	width: 100px;
}
#itable{
    border-collapse: collapse;
    table-layout: fixed;
    max-width: none;
    width: max-content;
    border-collapse: separate;
}
#itable tr th{
    position: sticky;/*important*/
    left: 0;/*important*/
    top: 0;/*important*/
    z-index: 1;
    background-color: #5DCEAF;
    color: #FFFFFF;
    font-size: 16px;
    width: 180px;
    font-weight: bold;
    border: 1px solid #FFF;
    padding: 3px;
    font-weight: bold;
}
#itable tr td{
    padding: 3px;
    text-align: center;
    width: 130px;
    font-size: 15px;
    border: 1px solid #FFF;
    background-color: #DFF5EF;
}

#mousewheel_example{

overflow-y:hidden;

overflow-x:auto;

margin-top:5px;

padding:0;

}

#itable tr th, #itable tr td{

width: 100px;

}

#itable{

border-collapse: collapse;

table-layout: fixed;

max-width: none;

width: max-content;

border-collapse: separate;

}

#itable tr th{

position: sticky;/*important*/

left: 0;/*important*/

top: 0;/*important*/

z-index: 1;

background-color: #5DCEAF;

color: #FFFFFF;

font-size: 16px;

width: 180px;

font-weight: bold;

border: 1px solid #FFF;

padding: 3px;

font-weight: bold;

}

#itable tr td{

padding: 3px;

text-align: center;

width: 130px;

font-size: 15px;

border: 1px solid #FFF;

background-color: #DFF5EF;

}

CSS Flex

Vertical Center

.search-wrap{
	display: flex;
	align-items: center;
	margin-bottom: 10px;
}

.search-wrap{

display: flex;

align-items: center;

margin-bottom: 10px;

}

https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/

Extra Blank Pages when Printing Page

html, body { height: auto; }

1	html, body { height: auto; }

Reference:

https://stackoverflow.com/questions/17145413/extra-blank-page-when-i-print-except-in-ie-is-it-my-print-css

Bootstrap Modal Issues

Width:

If the width of modal is too wide, check the following possible reasons:

If there is any long text string is not broken to new line.
Image width without max-width
iframe (e.g. embeded youtube video)

CSS Issues in iphone

如果不是RWD，Fixed Menu會沒辦法完整顯示

Solution: 用JS判斷window寬度，把fixed改成static

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
<meta name="viewport" content="width=1080">

<style>
body.mobile{
	padding-top:0;
}
	body.mobile header{
		position: static;
		min-width: 980px;
	}
</style>

<script>
$(document).ready(function(){
	$(window).resize(function(){
		var w = $(window).width();
		//console.log(w);
		if(w <= 1080){
			$('body').addClass('mobile');
		}else{
			$('body').removeClass('mobile');
		}
	});
});
</script>

<style>

body.mobile{

padding-top:0;

}

body.mobile header{

position: static;

min-width: 980px;

}

</style>

$(document).ready(function(){

$(window).resize(function(){

var w = $(window).width();

//console.log(w);

if(w <= 1080){

$('body').addClass('mobile');

}else{

$('body').removeClass('mobile');

}

});

</script>

iPhone會自動調整文字的大小，有時候內文的字型會比標題還大

Solution:

body{
	-webkit-text-size-adjust: 100%;
}

body{

-webkit-text-size-adjust: 100%;

}

table-cell will cause weird padding of a td

In table, if the CSS value of “display” is “table-cell”, and a image within, there will be a weird padding under the image. Refer to the green lines:

https://jsfiddle.net/RexLo/1hdxob6s/1/

Solution:

Set the display value of the image to “block”:

display: block;

1	display: block;

Reference:

DOCTYPE is causing the image to display as an inline element.
http://stackoverflow.com/questions/8479090/remove-spacing-between-table-cells-and-rows

body overflow issue

body overflow hidden, 要附加 -webkit-overflow-scrolling: touch, 不然手機看會以為壞掉了，卡卡的

figure 不是取代 image tag，在這裡使用image就好

Text-align bug on iphone (思源體)

用思源體時在iphone會發生字型不會對齊的Bug!!

Import (Link) CSS File

<link rel=stylesheet type="text/css" href="css/style.css">

1	<link rel=stylesheet type="text/css" href="css/style.css">

Text overflow – auto append “…”

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

M	T	W	T	F	S	S
« Mar
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30

Rex's Personal Site

This site is built on WordPress and contains personal notes, photos and videos

Category Archives: CSS

Sticky (Fixed) Column of a table

CSS Flex

Extra Blank Pages when Printing Page

Bootstrap Modal Issues

Width:

CSS Issues in iphone

如果不是RWD，Fixed Menu會沒辦法完整顯示

iPhone會自動調整文字的大小，有時候內文的字型會比標題還大

table-cell will cause weird padding of a td

Solution:

body overflow issue

Text-align bug on iphone (思源體)

Import (Link) CSS File

Text overflow – auto append “…”