Sherman IT: column

Showing posts with label column. Show all posts

10 April 2024

How to show the current column number on the status bar in vim?

:set ruler

10 July 2022

How to limit width of table to within screen width with html and css?

How to limit width of a wide table to within screen width with html and css?

Solution: Do the following 2 things

1. <table style='table-layout: fixed'>

2. Set width for every columns in the first row (you can leave the last column, or any one column of all)

<thead>

<tr>

</tr>

</thead>

That is all.

29 June 2021

CSS for 5 Typical Media Query Break Points (Device Screen Sizes)

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>

/* Typical device breakpoints - 5 groups */

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
[class*="col-"] {width: 100%; }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
.col-min600-1 {width: 8.33%;}
.col-min600-2 {width: 16.66%;}
.col-min600-3 {width: 25%;}
.col-min600-4 {width: 33.33%;}
.col-min600-5 {width: 41.66%;}
.col-min600-6 {width: 50%;}
.col-min600-7 {width: 58.33%;}
.col-min600-8 {width: 66.66%;}
.col-min600-9 {width: 75%;}
.col-min600-10 {width: 83.33%;}
.col-min600-11 {width: 91.66%;}
.col-min600-12 {width: 100%;}
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
.col-min768-1 {width: 8.33%;}
.col-min768-2 {width: 16.66%;}
.col-min768-3 {width: 25%;}
.col-min768-4 {width: 33.33%;}
.col-min768-5 {width: 41.66%;}
.col-min768-6 {width: 50%;}
.col-min768-7 {width: 58.33%;}
.col-min768-8 {width: 66.66%;}
.col-min768-9 {width: 75%;}
.col-min768-10 {width: 83.33%;}
.col-min768-11 {width: 91.66%;}
.col-min768-12 {width: 100%;}
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
.col-min992-1 {width: 8.33%;}
.col-min992-2 {width: 16.66%;}
.col-min992-3 {width: 25%;}
.col-min992-4 {width: 33.33%;}
.col-min992-5 {width: 41.66%;}
.col-min992-6 {width: 50%;}
.col-min992-7 {width: 58.33%;}
.col-min992-8 {width: 66.66%;}
.col-min992-9 {width: 75%;}
.col-min992-10 {width: 83.33%;}
.col-min992-11 {width: 91.66%;}
.col-min992-12 {width: 100%;}
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
.col-min1200-1 {width: 8.33%;}
.col-min1200-2 {width: 16.66%;}
.col-min1200-3 {width: 25%;}
.col-min1200-4 {width: 33.33%;}
.col-min1200-5 {width: 41.66%;}
.col-min1200-6 {width: 50%;}
.col-min1200-7 {width: 58.33%;}
.col-min1200-8 {width: 66.66%;}
.col-min1200-9 {width: 75%;}
.col-min1200-10 {width: 83.33%;}
.col-min1200-11 {width: 91.66%;}
.col-min1200-12 {width: 100%;}
}

</style>
</head>

<body>

</body>

</html>