I would like to make a border/frame under the text as same as the photo below
table.blueTable {
background-color: #5F80A8;
height: 200px;
width: 50%;
margin: auto;
position: relative;
bottom: -165px;
color: white;
}
table.blueTable td {
font-size: 1.3em;
}
#uno,
#tre,
{
text-align: center;
line-height: 4em;
}
#due,
#quattro,
{
text-align: left;
}
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>table6</title>
<table class="blueTable">
<tbody>
<tr>
<td id="uno">初期費用</td>
<td id="due">15万～30万<br>（選択プランによる</td>
</tr>
<tr>
<td id="tre">月額費用</td>
<td id="quattro">5万～15万<br>（選択プランによる）<br>＋SMS送信料 12円/通<br>＋IVR利用料 8円/60秒</td>
</tr>
</tbody>
</tr>
</table>
</body>
</html>
You can add css for table border as below:
td, th {
border: solid 1px;
border-left: none;
border-top: none;
}
Here is your updated code:
table.blueTable {
background-color: #5F80A8;
height: 200px;
width: 50%;
margin: auto;
position: relative;
bottom: -165px;
color: white;
}
td, th {
border: solid 1px;
border-left: none;
border-top: none;
}
table.blueTable td {
font-size: 1.3em;
border-bottom: 1px solid #fff;
}
#uno,
#tre,
{
text-align: center;
line-height: 4em;
}
#due,
#quattro,
{
text-align: left;
}
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>table6</title>
<table class="blueTable">
<tbody>
<tr>
<td id="uno">初期費用</td>
<td id="due">15万～30万<br>（選択プランによる</td>
</tr>
<tr>
<td id="tre">月額費用</td>
<td id="quattro">5万～15万<br>（選択プランによる）<br>＋SMS送信料 12円/通<br>＋IVR利用料 8円/60秒</td>
</tr>
</tbody>
</tr>
</table>
</body>
</html>
Hope this helps !
Can you add cellspacing to your table tag. Hope this will solve the issue.
<table class="blueTable" cellspacing="30">
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
table.blueTable td {
font-size: 1.3em;
border-bottom: 1px solid #fff;
border-right: 1px solid #fff;
}
Related
I'm trying to learn some HTML & CSS skills and I facing an issue that I couldn't find any proper solution online.
I'm trying to add some border-spacing to both sides to my designed table. please see the attached images for better understanding
Current table:
https://imgur.com/6eKSfVC
Desired table:
https://imgur.com/Vvafhlg
My code:
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Deshe Email Monthly Update</title>
<style>
table {
text-align: center;
font-size: 10pt;
height: 22px;
border-radius: 10px;
box-shadow: 0 3px 6px 0 rgba(44, 40, 40, 0.11);
bgcolor="#ffffff";
font-family: calibri;
color: #707070;
width: 50%;
border-collapse: collapse;
}
th, td{
padding-top: 10px;
padding-bottom: 10px;
}
tr {
padding-top: 10px;
padding-bottom: 10px;
border: solid #1AAE9F;
border-width: 1px 0;
}
tr:first-child {
border-top: none;
}
tr:last-child {
border-bottom: none;
}
</style>
</head>
<body>
<table>
<tr>
<th>Symbol</th>
<th>Position</th>
<th>Return</th>
</tr>
<tr>
<td>AAPL</td>
<td>Short</td>
<td>40.1%</td>
</tr>
<tr>
<td>AAPL</td>
<td>Short</td>
<td>40.1%</td>
</tr>
<tr>
<td>AAPL</td>
<td>Short</td>
<td>40.1%</td>
</tr>
<tr>
<td>AAPL</td>
<td>Short</td>
<td>40.1%</td>
</tr>
</table>
<br><br><br>
</body>
Would you guys help me a proper solution?
Thanks!
Hope this solves your problem
Add your table in a div then apply padding and box-shadow to the box (div).
table {
text-align: center;
font-size: 10pt;
height: 22px;
width:100%;
font-family: calibri;
color: #707070;
border-collapse: collapse;
}
th, td{
padding-top: 10px;
padding-bottom: 10px;
}
tr {
padding-top: 10px;
padding-bottom: 10px;
border: solid #1AAE9F;
border-width: 1px 0;
}
tr:first-child {
border-top: none;
}
tr:last-child {
border-bottom: none;
}
.table-box {
padding:20px;
border-radius: 10px;
box-shadow: 0 3px 6px 0 rgba(44, 40, 40, 0.11);
}
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Deshe Email Monthly Update</title>
</head>
<body>
<div class="table-box">
<table>
<tr>
<th>Symbol</th>
<th>Position</th>
<th>Return</th>
</tr>
<tr>
<td>AAPL</td>
<td>Short</td>
<td>40.1%</td>
</tr>
<tr>
<td>AAPL</td>
<td>Short</td>
<td>40.1%</td>
</tr>
</table>
</div>
</body>
</html>
Here is your solution, try with this way it will helps you.
.main-card {
padding: 10px 30px;
box-shadow: 0 3px 6px 0 rgba(44, 40, 40, 0.11);
width: 50%;
border-radius: 10px;
}
table {
width: 100%;
text-align: center;
font-size: 10pt;
height: 22px;
background-color: #ffffff;
font-family: calibri;
color: #707070;
border-collapse: collapse;
}
th,
td {
padding-top: 10px;
padding-bottom: 10px;
}
tr {
padding-top: 10px;
padding-bottom: 10px;
border: solid #1AAE9F;
border-width: 1px 0;
}
tr:first-child {
border-top: none;
}
tr:last-child {
border-bottom: none;
}
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Deshe Email Monthly Update</title>
</head>
<body>
<div class="main-card">
<table>
<tr>
<th>Symbol</th>
<th>Position</th>
<th>Return</th>
</tr>
<tr>
<td>AAPL</td>
<td>Short</td>
<td>40.1%</td>
</tr>
<tr>
<td>AAPL</td>
<td>Short</td>
<td>40.1%</td>
</tr>
<tr>
<td>AAPL</td>
<td>Short</td>
<td>40.1%</td>
</tr>
<tr>
<td>AAPL</td>
<td>Short</td>
<td>40.1%</td>
</tr>
</table>
</div>
</body>
.table-wrapper {
display: flex;
width: 50vw;
max-width: 300px;
}
.table-theme {
padding: 0.5em 2em;
border-radius: 10px;
box-shadow: 0 3px 6px 0 rgba(44, 40, 40, 0.11);
font-size: 12px;
}
.table-theme caption {
font-size: 1.5em;
font-weight: bold;
margin: 0.5em;
}
.table-theme > table {
text-align: center;
font-size: 10pt;
height: 22px;
background-color: "#ffffff";
font-family: Calibri;
color: #707070;
border-collapse: collapse;
width: 100%;
}
.table-theme tbody tr {
padding: 0 75em;
border: solid #1AAE9F;
border-width: 1px 0;
}
.table-theme tbody tr:last-child {
border-bottom: none;
}
.table-theme thead th {
padding: 0.25em 0;
}
.table-theme tbody td {
padding: 0.75em 0;
}
/* example */
.table-theme td[data-th="Symbol"] {
font-size: 1.1em;
}
.table-theme th[title="Return"],
.table-theme td[data-th="Return"] {
color: green;
font-weight: bold;
}
<div class="table-theme table-wrapper">
<table>
<caption>Februari biggest gainers</caption>
<thead>
<tr>
<th title="Symbol">Symbol</th>
<th title="Position">Position</th>
<th title="Return">Return</th>
</tr>
</thead>
<tbody>
<tr>
<td data-th="Symbol">AAPL</td>
<td data-th="Postion">Short</td>
<td data-th="Return">40.1%</td>
</tr>
<tr>
<td data-th="Symbol">AAPL</td>
<td data-th="Postion">Short</td>
<td data-th="Return">40.1%</td>
</tr>
<tr>
<td data-th="Symbol">AAPL</td>
<td data-th="Postion">Short</td>
<td data-th="Return">40.1%</td>
</tr>
<tr>
<td data-th="Symbol">AAPL</td>
<td data-th="Postion">Short</td>
<td data-th="Return">40.1%</td>
</tr>
</tbody>
</table>
</div>
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
},
});
I am looking for a solution for a responsive HTML table and the closest CSS solution I have found is:
#media screen and (max-width: 600px) {
table thead {
border: none;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
table tr {
border-bottom: 3px solid #ddd;
display: block;
}
table td {
border-bottom: 1px solid #ddd;
display: block;
text-align: right;
}
table td::before {
content: attr(data-label);
float: left;
}
}
However, the issue with this is I need to have a static data-label for each of my td so that the column header will, which is not very scalable. Does anyone know a way I can write the CSS that will automatically show the column header without me having to specify data-label? Here is my jsfiddle with the current solution where I manually specify data-label:
https://jsfiddle.net/tgpfhn8m/1051/
you should try this
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
border: 1px solid #ddd;
}
th, td {
text-align: left;
padding: 8px;
}
tr:nth-child(even){background-color: #f2f2f2}
</style>
</head>
<body>
<div style="overflow-x:auto;">
<table>
<tr>
<th>1</th>
<th>2</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
</div>
</body>
</html>
This is a crappy issue and I am truly sorry to ask this. But I have been programming PHP for hours and now trying to display it on a simple html layout. I need more coffee and my eyes are tired, woke up too early...
Anyway the issue is, that for some reason my css styles that should affect the text stylings has no effect what so ever on the layout. Which is a bit odd that the border settings and paddings do work, but font-weight or the background-color does not.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Visitor logs</title>
<style>
html {
}
body {
}
.first_row {
font-weight: bold;
background-color: red;
}
td {
padding: 4px 8px 4px 4px;
border-bottom: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr class="first_row">
<td>IP-address</td>
<td>Last visited</td>
<td>Rough location</td>
</tr>
</table>
</body>
</html>
Add this code:
table {
border-collapse: collapse;
}
table {
border-collapse: collapse;
}
.first_row {
font-weight: bold;
background-color: red;
}
td {
padding: 4px 8px 4px 4px;
border-bottom: 1px solid black;
}
<table>
<tr class="first_row">
<td>IP-address</td>
<td>Last visited</td>
<td>Rough location</td>
</tr>
<tr class="second_row">
<td>IP-address2</td>
<td>Last visited2</td>
<td>Rough location2</td>
</tr>
</table>
See This Also:
table {
border-collapse: collapse;
}
.first_row {
font-weight: bold;
background-color: red;
}
tr:not(.first_row) td:not(:first-child) {
border-left: 1px solid #000;
}
td {
padding: 4px 8px 4px 4px;
border-bottom: 1px solid black;
}
<table>
<tr class="first_row">
<td>IP-address</td>
<td>Last visited</td>
<td>Rough location</td>
</tr>
<tr class="second_row">
<td>IP-address2</td>
<td>Last visited2</td>
<td>Rough location2</td>
</tr>
</table>
You can used thead with th for heading of table
table {
border-collapse: collapse;
}
table th {
font-weight: bold;
background: red;
padding:4px;
border-bottom: 1px solid black;
}
td {
padding: 4px 8px 4px 4px;
border-bottom: 1px solid black;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Visitor logs</title>
</head>
<body>
<table>
<thead>
<tr>
<th>IP-address</th>
<th>Last visited</th>
<th>Rough location</th>
</tr>
</thead>
<tr>
<td>text</td>
<td>text</td>
<td>text</td>
</tr>
</table>
</body>
</html>
Add cellspacing="0" cellpadding="0" in table tag or add table{border-collapse: collapse;} in your css.
.first_row {
font-weight: bold;
background-color: red;
}
td {
padding: 4px 8px 4px 4px;
border-bottom: 1px solid black;
}
<table cellspacing="0" cellpadding="0">
<tr class="first_row">
<td>IP-address</td>
<td>Last visited</td>
<td>Rough location</td>
</tr>
</table>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<style type="text/css">
.table {
border-collapse: collapse;
border-spacing: 0;
}
.table td {
font-family: Arial, sans-serif;
font-size: 14px;
padding: 10px 20px;
border-style: solid;
border-width: 2px;
}
.table th {
font-family: Arial, sans-serif;
font-size: 14px;
font-weight: normal;
padding: 10px 20px;
border-style: solid;
border-width: 2px;
}
.table .tg-1 {
text-align: center;
}
.table .tg-2 {
font-weight: bold;
background-color: #c0c0c0;
text-align: center;
}
</style>
<table class="table">
<tr>
<th class="tg-2">Animal Name</th>
<th class="tg-2">Picture</th>
</tr>
<tr>
<td class="tg-1">Cat</td>
<td rowspan="3"></td>
</tr>
<td class="tg-1">Dog</td>
</tr>
<tr>
<td class="tg-1">Horse</td>
</tr>
</table>
</body>
</html>
<br>
I have created the above table with hyperlinks, the hyperlinks are opening in the same window/tab however I would like to open them in the blank column of my table.
Can you please offer some help?
How do I set the target of the hyperlink to the second column of the table?
Using just HTML (and CSS) without client-side scripting, you would need to put an iframe element into the second column and make the links open in that iframe. (With scripting, you could alternatively just change the src attribute of an img element placed in the second column.)
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<style type="text/css">
.table {
border-collapse: collapse;
border-spacing: 0;
}
.table td {
font-family: Arial, sans-serif;
font-size: 14px;
padding: 10px 20px;
border-style: solid;
border-width: 2px;
}
.table th {
font-family: Arial, sans-serif;
font-size: 14px;
font-weight: normal;
padding: 10px 20px;
border-style: solid;
border-width: 2px;
}
.table .tg-1 {
text-align: center;
}
.table .tg-2 {
font-weight: bold;
background-color: #c0c0c0;
text-align: center;
}
.table iframe {
padding: 0;
width: 216px; /* modify as needed according to image size */
height: 116px; /* use +16px in both to allow for internal padding */
border: none;
}
</style>
<table class="table">
<tr>
<th class="tg-2">Animal Name</th>
<th class="tg-2">Picture</th>
</tr>
<tr>
<td class="tg-1">Cat</td>
<td rowspan="3"><iframe src="about:blank" name="pic"></iframe></td>
</tr>
<td class="tg-1">Dog</td>
</tr>
<tr>
<td class="tg-1">Horse</td>
</tr>
</table>
</body>
</html>
I think that what you really need it for the hyperlinks to be replaced with image tags, e.g.:
<td class="tg-1"><image src="Images/Horse.jpg" alt="Horse"/></td>