I am currently working on creating a table with borders between each row. However, I am facing an issue where the row borders are touching the outer border of the table. Despite my efforts, I have been unable to find a solution to this problem. I feel like there must be a simple fix that I am missing.
The desired look for the table is as follows:
https://i.stack.imgur.com/YpZCQ.png
However, the current appearance of the table is different:
IF you have specified borders as TD for inner elements,
tr td:first-child {
padding-left:25px;
}
tr td:last-child {
padding-right:25px;
}
Alternatively, a stylish approach would be to utilize a transparent table within a
gray DIV with the desired padding
.tableContainer{
padding:15px;
position:relative;
margin:0 auto;
background:#353033;
border:1px solid #000;
box-shadow:0 5px 15px rgba(0,0,0,0.3);
}
table{
color:#B3B3B3;
table-layout:fixed;
border-collapse:collapse;
width:100%;
}
td, th{
text-align:left;
padding:5px 0;
border-bottom: 1px solid #000;
}
/* --------------------- */
html, body{
height:100%;
}
body{
font: 16px/1 sans-serif;
color: #fff;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#6da5ce+0,9c7bac+50,ec8e99+100 */
background: #6da5ce; /* Old browsers */
background: -moz-linear-gradient(45deg, #6da5ce 0%, #9c7bac 50%, #ec8e99 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#6da5ce), color-stop(50%,#9c7bac), color-stop(100%,#ec8e99)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(45deg, #6da5ce 0%,#9c7bac 50%,#ec8e99 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(45deg, #6da5ce 0%,#9c7bac 50%,#ec8e99 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(45deg, #6da5ce 0%,#9c7bac 50%,#ec8e99 100%); /* IE10+ */
background: linear-gradient(45deg, #6da5ce 0%,#9c7bac 50%,#ec8e99 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6da5ce', endColorstr='#ec8e99',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}<div class="tableContainer">
<table>
<tr>
<th>Title</th>
<th>Title</th>
</tr>
<tr>
<td>Text goes here</td>
<td>and here also</td>
</tr>
</table>
</div>.dataTable {
margin: 25px 0px;}
td, th {
padding: 8px 12px;}
My website features two dropdown menus - one for selecting countries and another for cities. The country menu is populated with data from a database, and once a country is selected, the city dropdown is dynamically filled with corresponding cities using a ...
With Python, I am creating an HTML page that contains multiple tables with the same number of columns, all holding the same type of data. While the generated page is functional, I would like to improve readability by ensuring that all tables have the same ...
In my grid view, I have a checkbox in the last column. I am trying to ensure that only one row can be selected at a time. <tr *ngFor="let permit of PermitDetails" (click)="GoByClick(permit)"> <td style="text-align: center">{{permit.TVA_BAT ...
I have been searching for a solution to my problem, but all I found were answers that addressed similar issues in a slightly different way. My challenge involves placing multiple smaller images on top of a larger background image. To achieve this, I utili ...
{ "top10": [ { "state": "red", "claimed": true, "branch": "release-2.3.4", ...
My row has two columns <div class="row"> <div class="col-9"> hello </div> <div class="col-3"> world </div> </div> But I want to change the column classes for small screens, so they would be ...
Having an issue with showing or hiding table rows using jQuery. I would like it so that when a user clicks on a table row with id="jobtitle", the corresponding tr with class="texter" will either show up or hide if it is already displayed. This is my curre ...
I am attempting to test my ability by creating a basic webpage. My goal is to take the text entered by the user in a textarea and add it to the page using a button. This button should generate a new paragraph element, place the user input inside of it, and ...
For hours now, I've been struggling to make Lighthouse work in Chrome for my initial PWA project. I feel completely lost as nothing seems to be making sense despite the basic code I have included below. The issue arises when I load the page normally ...
I'm currently exploring the <progress> element and attempting to incorporate a CSS transition to achieve a smooth progress bar effect as its value increases. Despite my efforts, I can't seem to trigger JS after the transitionend event occur ...
Recently, I have encountered an issue with a button on my webpage. Every time the button is clicked, the onclick code executes and then the page refreshes. This was not a problem before, but now it seems to be automatically refreshing the page. The curren ...
I have a scenario where I am uploading multiple images and inserting them into specific div elements. These divs should toggle a class when clicked. Should I include the part of code that adds the onclick event inside the ajax success function? Your help i ...
After writing some code with a link that toggles text visibility upon click, I now want to incorporate saving this state in web storage so that it persists upon page reload. As a beginner in JavaScript and HTML, this task has proven challenging for me. Th ...
Hey there, I'm new to AngularJS and currently using Onsen UI in my demo application. I have two pages in my app and I'm trying to pass two values to the next page. I managed to pass one value successfully, but when I attempt to send the second on ...
I've utilized the :after and :before pseudo-elements to create a border effect when hovering over the navigation links. I've been trying to achieve the same border effect in the :active pseudo-class as well. Can someone please guide me on how to ...
Despite searching through various posts on this topic, I have yet to find a solution that addresses my specific issue. I've experimented with different libraries and combinations of them in an attempt to achieve the desired outcome, but so far, I have ...
<input class="span10" type="number" max="99999" ng-maxLength="5" placeholder="Enter Points" ng-change="myFunc($index)" ng-model="myVar"> This code snippet adjusts the value of form.input.$valid to false if the number entered exceeds 99999 or is long ...
Is there a way to incorporate notifications into my website's favicon when the browser tab is not in focus? My tech stack includes React, Material UI, and TypeScript. I assume this is a frequent requirement, yet I haven't come across a simple so ...
I've built a full screen web application that I don't want to scroll, so I used this code: $("body").css("overflow", "hidden"); However, after adding a resize listener: $(window).resize(function(){ console.log("Inner height: " + $(window). ...
Currently immersed in the world of Pug, node.js, and express as I build a web application. Facing hurdles when trying to style elements within Pug conditionals using CSS. For instance, consider this Pug snippet: div(id='outside') if authoris ...