I was building some tables and went through a lot of iterations. At some point I picked up this weird bottom border on my first row (https://jujusupply.com/pages/customer-gift-notes) and I'm not sure where it's coming from or how to get rid of it? It's just a very simple HTML table.
table {
width: 100%;
}
td {
text-align: center;
font-size: em(14px);
font-style: italic;
padding: 12px;
background-color: #eeeeee;
border: 8px solid white;
height: 200px;
}
td:hover {
background-color: #ffde17;
}
<div style="overflow-x: auto;">
<table>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
</div>
It's from here :
media="all"
tr:first-child th:after, tr:first-child td:after {
content: '';
display: block;
position: absolute;
bottom: 0;
left: -15px;
right: 15px;
border-bottom: 1px solid #1c1d1d;
}
in the theme.scss.css file
Related
I'm building a very basic test website in HTML, and I'm learning how to put borders on table cells. I have a problem, I'm trying to round the borders in my table but I just get rounded cells (td and th), but not the table itself.
table,
th,
td {
text-align: center;
width: 30%;
border: 5px solid aqua;
border-collapse: collapse;
border-radius: 45px;
font-family: arial;
padding: 11px;
}
th {
color: white;
font-family: impact;
}
td {
color: yellow;
}
tr:nth-child(odd) {
background-color: darkblue;
}
<table align=c enter>
<tr>
<th>Choncho</th>
<th>Klokin</th>
<th>Fetuc</th>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>papas</td>
<td>refrescos</td>
<td>tingas</td>
</tr>
</table>
I even tried doing the following to see if there were any changes:
table {
border-radius: 45px;
}
the,
td {
text-align: center;
width: 30%;
border: 5px solid aqua;
font-family: arial;
padding: 11px;
}
But all the borders remain squares.
I think that has something to do with collapsing the border.
Try to remove this line
border-collapse: collapse;
table,
th,
td {
text-align: center;
width: 30%;
border: 5px solid aqua;
/* border-collapse: collapse; *//* remove this line */
border-radius: 45px;
font-family: arial;
padding: 11px;
}
th {
color: white;
font-family: impact;
}
td {
color: yellow;
}
tr:nth-child(odd) {
background-color: darkblue;
}
<table align=c enter>
<tr>
<th>Choncho</th>
<th>Klokin</th>
<th>Fetuc</th>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>papas</td>
<td>refrescos</td>
<td>tingas</td>
</tr>
</table>
Then use padding and margin to control the spacing if needed
I'm new into frontend and I have been trying to design a calculator. I used table because I think it is the best option. I used <button> element in order to make it clickable, but when I use the attribute ( border: none or 0) it's not clickable anymore , so what's causing that?
Also I would like to know how to change the button background ( I have tried to inherit it and that works but I don't think this is practical).
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
/* padding: 0; */
/* margin: 0 auto; */
font-size: 2rem;
/* text-align: center; */
background-color: #d8d9db;
}
.wrapper {
width: 400px;
text-align: center;
margin: 0 auto;
padding: 0%;
background-color: black;
}
.screen {
padding: 1rem;
background-color: black;
color: white;
text-align: right;
}
tr {
border: 8px solid black;
text-align: center;
}
td {
/* border: 5px solid red; */
background-color: #d8d9db;
width: 100px;
text-align: center;
margin: 0.5rem;
}
button {
font-size: 3rem;
color: black;
border: 0;
margin: 0;
background-color: inherit;
font-weight: bold;
}
.col4 {
background-color: #df974c;
color: white;
width: 25%;
}
.col4 button {
color: white;
padding: 1rem;
}
.butc {
width: 50%;
background-color: #d8d9db;
padding: 1rem;
}
.but0 {
width: 75%;
background-color: #d8d9db;
padding: 1rem;
}
<div class="wrapper">
<section class="screen">0</section>
<section class="calc-buttons">
<table>
<tbody>
<tr>
<td colspan="2" class="butc"><button>C</button></td>
<td class="numbs"><button>←</button></td>
<td class="col4"><button>÷</button></td>
</tr>
<tr>
<td class="numbs"><button>7</button></td>
<td class="numbs"><button>8</button></td>
<td class="numbs"><button>9</button></td>
<td class="col4"><button>×</button></td>
</tr>
<tr>
<td class="numbs"><button>4</button></td>
<td class="numbs"><button>5</button></td>
<td class="numbs"><button>6</button></td>
<td class="col4"><button>−</button></td>
</tr>
<tr>
<td class="numbs"><button>1</button></td>
<td class="numbs"><button>2</button></td>
<td class="numbs"><button>3</button></td>
<td class="col4"><button>+</button></td>
</tr>
<tr>
<td colspan="3" class="but0"><button>0</button></td>
<td class="col4"><button>=</button></td>
</tr>
</tbody>
</table>
</section>
</div>
Button default active state depends on border when setting border to none for the button this means that border-style set in :active won't work.
So in order to remove the border but reserve the clickable effect you need to add something like this in css
button:active{
border: 1px inset black
}
and consider specifying different buttons widths and heights to match the calculator style which will help in their background colors
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've been experimenting with advanced selectors and it has been going great until now. I'm trying to align 2 carets below each other in a table. To make it appear like the rows are sortable. But I haven't been able to get it working and I couldn't find any information on this specific issue on google.
If anybody can help me with this or provide information, I'd appreciate it.
HTML:
<div id="table">
<table>
<tr>
<td>Column1</td>
<td>Column2</td>
<td>Column3</td>
<td>Column4</td>
<td>Column5</td>
<td>Column6</td>
<td>Column7</td>
<td>Column8</td>
<td>Column9</td>
<td>Column10</td>
<td></td>
</tr>
</table>
</div>
CSS:
#table tr:first-child td:not(:nth-child(9)):not(:last-child):after {
font-family: FontAwesome;
content: "\f0d7" ' ' "\f0d8";
float:right;
}
JSFIDDLE
http://jsfiddle.net/jk62x5ox/
#table table {
margin-top: 40px;
width: 100%;
border: none;
border-collapse: collapse;
}
#table td {
padding: 0 5px;
border-left: 1px solid #000;
border-right: 1px solid #000;
}
#table tr {
background: #dbe5f1;
}
#table td:first-child {
border-left: none;
}
#table td:last-child {
border-right: none;
padding-right: 0;
}
#table tr td:last-child:before {
font-family: FontAwesome;
content: "\f05c";
font-size: 18px;
}
#table tr:first-child td:not(:nth-child(9)):not(:last-child):after {
font-family: FontAwesome;
content: "\f0d8"' '"\f0d7";
float: right;
width: 5px;
line-height: 0.5;
}
<div id="table">
<table>
<tr>
<td>Column1</td>
<td>Column2</td>
<td>Column3</td>
<td>Column4</td>
<td>Column5</td>
<td>Column6</td>
<td>Column7</td>
<td>Column8</td>
<td>Column9</td>
<td>Column10</td>
<td></td>
</tr>
</table>
</div>
I've checked about 50 links in the past 20 minutes and tried every combination of stuff I can think of but there is still this massive automatic gap between my th elements, as seen in the picture below.
The test column will eventually be removed so that item has a colspan of 2, but in the mean time I cannot figure out how to remove this gap.
As you can see, item and test are very close, which is what I want. The rest are miles apart, and it's getting extremely annoying that I cannot solve this.
Picture: http://i.imgur.com/Herr27e.png
Markup & CSS:
Both generated from HAML and SCSS respectively.
<div class="ticker">
<h2>NEW LISTINGS</h2>
<div class="ticker-body">
<table id="new-listings">
<thead>
<tr>
<th>Item</th>
<th>test</th>
<th>Seller</th>
<th>Seller Wants</th>
</tr>
</thead>
<tbody>
<tr>
<td class="item-image">
<div class="item-image-container">
</div>
</td>
<td>Item Name</td>
<td>tsujp</td>
<td>Something Else Here</td>
</tr>
<tr>
<td class="item-image">
<div class="item-image-container">
</div>
</td>
<td>Item Name</td>
<td>tsujpdsds</td>
<td>Something Else Here</td>
</tr>
</tbody>
</table>
</div>
</div>
.ticker
{
.ticker-body
{
margin-top: 10px;
border: 1px solid $type25Border;
#include transition( border 0.2s ease-in-out );
&:hover
{
border: 1px solid $greenText;
}
}
}
table#new-listings
{
width: 645px;
color: $whiteText;
thead
{
font-family: "opensans-SB";
font-size: 14px;
th
{
padding-top: 15px;
padding-bottom: 8px;
}
}
th, td
{
text-align: left;
vertical-align: middle;
padding: 5px 10px 5px 10px;
}
tbody
{
tr
{
font-family: "opensans-R";
font-size: 12px;
//border-top: 1px solid $type35Border;
&:nth-child(odd) { background-color: $type60Background; }
&:nth-child(even) { background-color: $type70Background; }
.item-image
{
width: 45px;
height: 32px;
.item-image-container
{
width: 100%;
height: 100%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
background-image: url( "src/hornmask.png" );
border: 1px solid $type35Border;
box-shadow: $softShadow;
}
}
}
}
}