i want to make my horizontal table go vertical in responsive. what i mean is that my table is at the moment horizontal, and i want to make it vertical. i dont care if it is with table attributes or div attributes.
thanks.
i dont know what else to write about my problem.
body {
background-color: #596770;
margin-left: 85px; /* Same as the width of the sidenav */
margin-top: 102.5px;
font-size: 18px; /* Increased text to enable scrolling */
padding: 0px 52px 0px 52px;
font-size: 35;
color:white;
font-family: montserrat, sans-serif;
}
table {
}
th {
width: 423px;
height: 273px;
}
.latest img {
max-width: 100%;
}
.About {
margin: -45px 0px 0px -52px;
}
/* Bottom left text */
.bottom-left {
position: absolute;
bottom: 8px;
left: 16px;
}
<div class="main">
<h2>Latest News</h2>
<style>
table, th {
border: 1px solid black;
}
table, tr {
border: 0px;
}
</style>
<table class="latest">
<tr>
<!--Latest news-->
<th>
<a href="">
<img src="img/NemID_app_to.jpg.png" alt="NemID"><img/>
</a>
</th>
<td width="61px">
<!--second news-->
<th>Pic2</th>
<td width="61px">
<!--Third news-->
<th>Pic3</th>
</tr>
</table>
</div>
You can use bootstrap and have col tags. When the screen is made smaller the columns will shift down vertically. See an example here: https://getbootstrap.com/docs/3.3/examples/grid/
Are you looking for something like this?
* {
margin: 0;
}
.table {
display: table;
width: 100%
}
.tr {
display: table-row;
}
.td {
display: table-cell;
border: 1px solid #ccc;
padding: 5px
}
#media (max-width: 768px) {
.tr {
display: block;
float: left;
}
.td {
display: block;
}
}
<div class="table">
<div class="tr">
<div class="td">Test 1</div>
<div class="td">Test 2</div>
<div class="td">Test 3</div>
<div class="td">Test 4</div>
<div class="td">Test 5</div>
<div class="td">Test 6</div>
</div>
<div class="tr">
<div class="td">Test 1</div>
<div class="td">Test 2</div>
<div class="td">Test 3</div>
<div class="td">Test 4</div>
<div class="td">Test 5</div>
<div class="td">Test 6</div>
</div>
</div>
When i try to use bootstrap, it is interference with my own CSS. it is possible, to only let the Bootstrap CSS to work on a special ammount of my website.
Looking at your example, you don't want an actual table, but some grid to place the news items. I don't know which browsers you want to support, but CSS Grid layout may be the solution. Then you can define a different grid depening on the screen width.
is this what you are looking for:
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
</style>
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<div class="container-fluid">
<div class="row">
<div class="col-sm-2" style="background-color:lavender;">.col-sm-4a</div>
<div class="col-sm-2" style="background-color:lavenderblush;">.col-sm-4a</div>
<div class="col-sm-2" style="background-color:lavender;">.col-sm-4a</div>
<div class="col-sm-2" style="background-color:lavender;">.col-sm-4a</div>
<div class="col-sm-2" style="background-color:lavenderblush;">.col-sm-4a</div>
<div class="col-sm-2" style="background-color:lavender;">.col-sm-4a</div>
</div>
<div class="row">
<div class="col-sm-2" style="background-color:lavender;">.col-sm-4b</div>
<div class="col-sm-2" style="background-color:lavenderblush;">.col-sm-4b</div>
<div class="col-sm-2" style="background-color:lavender;">.col-sm-4b</div>
<div class="col-sm-2" style="background-color:lavender;">.col-sm-4b</div>
<div class="col-sm-2" style="background-color:lavenderblush;">.col-sm-4b</div>
<div class="col-sm-2" style="background-color:lavender;">.col-sm-4b</div>
</div>
</div>
<header>
</header>
</body>
</html>
resize the window to see effect
Related
How can I get a Bootstrap 5 grid row to span its entire content vertically? In the example below, if I add a label element the content of the first row flows over the second row.
<!doctype html>
<html lang="en">
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<style>
.ql-container {
box-sizing: border-box;
font-family: Helvetica, Arial, sans-serif;
font-size: 13px;
height: 100%;
margin: 0px;
position: relative;
}
.ql-snow {
box-sizing: border-box;
border: 1px solid #d1d5db;
}
.ql-editor {
box-sizing: border-box;
line-height: 1.42;
height: 100%;
outline: none;
overflow-y: auto;
padding: 12px 15px;
-o-tab-size: 4;
tab-size: 4;
-moz-tab-size: 4;
text-align: left;
white-space: pre-wrap;
word-wrap: break-word;
}
</style>
</head>
<body>
<div class="container">
<form class="my-3">
<div class="row py-2">
<div class="col-md-12">
<label for="txtBox" class="form-label">Title</label>
<div id="txtBox" class="ql-container ql-snow">
<div class="ql-editor">
<p>TESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTE</p>
</div>
</div>
</div>
</div>
<div class="row py-2">
<div class="col-md-12">
next row
</div>
</div>
</form>
</div>
</body>
</html>
Edit 1:
Smaller example
<!doctype html>
<html lang="en">
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<style>
.ql-container {
height: 100%;
position: relative;
border: 1px solid #d1d5db;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col">
Title
<div id="txtBox" class="ql-container">
<p>
TESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTE
TESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTE
TESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTE
TESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTE
TESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTE
TESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTE
TESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTE
TESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTE
TESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTE
TESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTE
TESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTE
TESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTE
TESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTE
TESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTE
TESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTESTESTTESTE
</p>
</div>
</div>
</div>
<div class="row">
<div class="col">
next row
</div>
</div>
</div>
</body>
</html>
This overlap is being caused by your style rule:
<style>
.ql-container {
height: 100%;
...
}
</style>
Along with the html structure:
<div class="col"><!-- this is the parent element -->
Title <!-- the height of this text is same as overlap -->
<div id="txtBox" class="ql-container">
<!-- because this element's height is 100% of the parent -->
</div>
</div>
If you must have the style rule, for reasons not made apparent in your question, then the solution is to
Either: Make a whole new .row with .col for the text Title:
<div class="row">
<div class="col">
Title <!-- the height of this text no longer has affect -->
</div>
</div>
<div class="row">
<div class="col"><!-- this is the parent element -->
<div id="txtBox" class="ql-container">
<!-- this element's height is 100% of the parent -->
</div>
</div>
</div>
Or: Just put Title in its own .col-12 forcing subsequent .col(s) to wrap to the next line.
<div class="row">
<div class="col-12">
Title <!-- the height of this text no longer has affect -->
</div>
<div class="col"><!-- this is the parent element -->
<div id="txtBox" class="ql-container">
<!-- this element's height is 100% of the parent -->
</div>
</div>
</div>
I have a table like this and i want this;
tr {
float: left !important;
}
tr:nth-child(2n+1) {
clear: left !important;
padding-right: 10px !important;
}
<table>
<tbody>
<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
<tr><td>4</td></tr>
<tr><td>5</td></tr>
<tr><td>6</td></tr>
<tr><td>7</td></tr>
<tr><td>8</td></tr>
<tr><td>9</td></tr>
</tbody>
</table>
This code not working internet explorer 7, how can i solve? This is explorer 7 result;
try this
table, tbody, tr {
display: block;
}
tr {
float: left;
width: 50%;
}
I suggest trying to use DIV instead of a table. It may help you to achieve the desired output for the IE 7 browser.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<style type="text/css">
#container, #left, #right{margin: 0px; padding: 0px; border: 0px;}
#left{width: 10%; float: left;}
#right{width: 90%; float: right;}
</style>
</head>
<body>
<div id="container">
<div id="left">
1
</div>
<div id="right">
2
</div>
<div id="left">
3
</div>
<div id="right">
4
</div>
</div>
<div id="left">
5
</div>
<div id="right">
6
</div>
</div>
<div id="left">
7
</div>
<div id="right">
8
</div>
<div id="right">
9
</div>
</div>
</body>
</html>
Output in the IE 11 browser with Document mode IE 7:
I have this Bootstrap design,two rows, their columns are class="col-sm-2" and class="col-sm-10".
How can I make the rowspan like in the img below?
Please see this. I have used bootstrap-4.
/*this css is only for identifying row*/
.row > [class^="col-"] {
background-color: rgba(86, 61, 124, 0.15);
border: 1px solid rgba(86, 61, 124, 0.2);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-2">
1 of 2
</div>
<div class="col-10">
<div class="row">
<div class="col-12">
Level 2
</div>
<div class="col-12">
Level 2
</div>
</div>
</div>
</div>
</div>
yes just easly use bootstrap classe
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-2 col-lg-2" style="background-color: red">
hello
</div>
<div class="col-md-10 col-lg-10" style="background-color: red">
<div class="row">
<div class="col-md-12" style="background-color: black">
<p>a</p>
</div>
<div class="col-md-12" style="background-color: yello">
<p>test</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I came up with something like this...
<div class="row">
<div class="col-sm-2 left"></div>
<div class="col-sm-10 col-sm-push-2">
<div class="col-sm-12 rightTop"></div>
<div class="col-sm-12 rightBottom"></div>
</div>
</div>
.row {
position: relative;
width: 500px;
margin: 15px auto;
}
.left {
position: absolute;
//left is 15px to negate .row's negative mrgins
left: 15px;
height: 100%;
padding: 0;
background-color: #ff0000;
}
.rightTop, .rightBottom {
height: 50px;
padding: 0;
}
.rightTop {
background-color: #00ff00;
}
.rightBottom {
background-color: #0000ff;
}
codepen example here.
<table width="300" border="1">
<tbody>
<tr>
<td rowspan="2">Merged</td>
<td>Table First Row</td>
</tr>
<tr>
<td>Table Second Row</td>
</tr>
</tbody>
I am using bootstrap to layout my website.
Everything is fine except the vertical alignment of the text "THIS IS TEST". I used different ways which I found in the web such as combination of vertical-align: middle and text-align: center and flex box. None of these generated the right vertical alignment. Here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script>
<style>
.header{
font-weight: bold;
font-size: 30px;
background-color: #4070CB;
color: #EFF0F2;
height:60px;
}
.txt{
align-items :center;
display : flex;
text-align: center;
justify-content: center;
}
.rightImg{
margin-right:30px;
margin-left:12px;
}
.leftImg{
margin-right:12px;
margin-left:30px;
}
</style>
</head>
<body>
<div class="container col-sm-offset-1">
<div class="row">
<div class="col-sm-10 header">
<div class="row">
<div class="col-sm-1 leftImg"><img src="http://image.flaticon.com/sprites/authors/28-simpleicon.png" alt="Smiley face" height="36" width="36"></div>
<div class="col-sm-8 txt">THIS IS A TEST</div>
<div class="col-sm-1 rightImg"><img src="http://image.flaticon.com/sprites/authors/28-simpleicon.png" alt="Smiley face" height="36" width="36"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3" style="background-color:lavender;">.col-sm-4</div>
<div class="col-sm-4" style="background-color:lavenderblush;">.col-sm-4</div>
<div class="col-sm-3" style="background-color:lavender;">.col-sm-4</div>
</div>
Also here is the jfiddle link to my code:
jfiddle
Can anyone help? How can I vertically align the text in the header?
Your text is centered vertically, but in relation to the row, not the header.
To vertically align everything in the header, you could replace the height with a padding.
.header {
padding: 15px 0;
}
Alternatively you can apply a margin to your text.
.txt {
margin-top: 10px;
}
I have some code for a project I'm making and I'm having trouble on the bootstrap layout. I want to make these columns add up to be the full screen height. Here is a jsfiddle of what I have now. I have all the rows nested in the columns set to
height:100%
because this was the closest I could get to what I want. I want to make something that looks like this (excuse my poor MS paint drawing skills):
Here is my code in case the link doesn't work:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Link to css file -->
<link rel="stylesheet" type="text/css" href="/static/main.css" mesdia="screen"/>
<!-- Bootstrap CDN-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<meta charset="UTF-8">
<title>Layout</title>
<!--<h1>Welcome to the layout</h1>
<p>Where would you like to navigate to?</p>-->
</head>
<body>
<div class="container-fluid">
<div class="row" id="navcols">
<div class="col layoutcol">
<div class="row layoutrow" id="LeftCol1">Row</div>
<div class="row layoutrow" id="LeftCol2">Row</div>
</div>
<div class="col-sm-6 layoutcol">
<div class="row MidCol layoutrow">Row</div>
<div class="row MidCol layoutrow">Row</div>
<div class="row MidCol layoutrow">Row</div>
<div class="row MidCol layoutrow">Row</div>
<div class="row MidCol layoutrow">Row</div>
</div>
<div class="col layoutcol">
<div class="row layoutrow" id="RightCol">Row</div>
</div>
</div>
</div>
<!--
<div class="container-fluid">
<h1 id="test">Welcome to my page! Where do you want to navigate to?</h1>
</div>-->
And here is the CSS
html,body {
height: 100%;
width: 100%;
}
.col {
background-color:lime;
}
#LeftCol1 {
background-color:blue;
height: 100%;
}
#LeftCol2 {
background-color:red;
height: 100%
}
.layoutrow{
border:solid 1px black;
}
.MidCol{
height: 100%;
}
#RightCol {
height: 100%;
}
How can I go about making this change? Thanks!
What you are seeking can be possible with css and bootstrap combination.
Here What I have done.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Grid </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
.first .first_row{
background-color: #ff0000;
height: 50vh;
border:2px solid black;
}
.first .second_row{
background-color: #ffff00;
height: 50vh;
border:2px solid black;
}
.second .first_row{
background-color: #cc99ff;
height: 20vh;
border:2px solid black;
}
.second .second_row{
background-color: #ff0066;
height: 20vh;
border:2px solid black;
}
.second .third_row{
background-color: #0099ff;
height: 20vh;
border:2px solid black;
}
.second .fourth_row{
background-color: #006666;
height: 20vh;
border:2px solid black;
}
.second .fifth_row{
background-color: #000099;
height: 20vh;
border:2px solid black;
}
.third .first_row{
background-color: #006600;
height: 100vh;
border:2px solid black;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-3 first">
<div class="row first_row">
</div>
<div class="row second_row">
</div>
</div>
<div class="col-md-6 second">
<div class="row first_row">
</div>
<div class="row second_row">
</div>
<div class="row third_row">
</div>
<div class="row fourth_row">
</div>
<div class="row fifth_row">
</div>
</div>
<div class="col-md-3 third">
<div class="row first_row">
</div>
</div>
</div>
</div>
</body>
</html>
I hope it will help you.
P.S. Don't mind the colors.
Try to put the inner rows inside a container like so:
<div class="col-sm-6 layoutcol">
<div class="container-fluid">
<div class="row MidCol layoutrow">Row</div>
<div class="row MidCol layoutrow">Row</div>
<div class="row MidCol layoutrow">Row</div>
<div class="row MidCol layoutrow">Row</div>
<div class="row MidCol layoutrow">Row</div>
</div>
</div>