While exploring different styles for my project, I came across a property named box-shadow. However, I am finding it challenging to integrate this with my table design.
Is there a specific property that can be added to the table style to achieve a similar effect? Perhaps something like a first-column-border-style property?
Here is an example of the desired outcome:
Utilize :first-child on td and th elements, then apply the shadow effect.
Explore the concept of child in CSS here: https://www.w3schools.com/cssref/sel_firstchild.asp
Discover how to use box-shadow in CSS from this link: https://www.w3schools.com/cssref/css3_pr_box-shadow.asp
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
td:first-child,th:first-child{
box-shadow: -15px 0 15px -15px inset;
}<h2>HTML Table</h2>
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</table>There is no direct way to target a specific column in HTML tables, but here is a workaround you can use...
<table>
<tr>
<th>X</th>
<th>Y</th>
<th>Z</th>
</tr>
<tr>
<td>10</td>
<td>20</td>
<td>30</td>
</tr>
<tr>
<td>40</td>
<td>50</td>
<td>60</td>
</tr>
<tr>
<td>70</td>
<td>80</td>
<td>90</td>
</tr>
</table>
To target the first column in the table above using CSS, you can use the following selector-
tr>:first-child {
<your_box-shadow_code_goes_here>
.
.
.
}
This CSS selector will apply styles to every first child of each row, effectively targeting the first column of your table.
To give the first column of your table a specific class, you can use CSS to style it accordingly.
.highlight-column{
background-color: yellow;
}
table,tr, td{
border: 1px solid #000;
border-collapse:collapse;
}<table>
<tr>
<td class="highlight-column">apple</td>
<td>banana</td>
<td>cherry</td>
</tr>
<tr>
<td class="highlight-column">date</td>
<td>fig</td>
<td>grape</td>
</tr>
<tr>
<td class="highlight-column">kiwi</td>
<td>mango</td>
<td>orange</td>
</tr>
<tr>
<td class="highlight-column">pear</td>
<td>quince</td>
<td>raspberry</td>
</tr>
</table>If you're looking to enhance the style of your table using CSS, consider utilizing the following selectors:
:first-of-type to specifically target the first td,:nth-of-type(x) where x represents the index of the td element you wish to style.By applying these selectors effectively, you can easily customize the appearance of your content.
It's worth noting that based on the provided image example, there appears to be an inset box-shadow effect on the beginning of the 2nd column rather than the first one.
Below is a functional code snippet demonstrating how to add a box-shadow using both of the aforementioned methods:
table {
border-collapse: collapse;
width: 50%;
}
td,
th {
border: 1px solid lightgray;
text-align: left;
padding: 8px 16px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
/* Styling 1st column */
td:first-of-type {
box-shadow: -25px 0 25px -25px inset blue;
}
/* Styling 2nd column */
td:nth-of-type(2) {
box-shadow: 25px 0 25px -25px inset red;
}<table>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>I hope this information proves to be beneficial for your project.
I've successfully implemented a Div visibility toggle using the code below: $('input[name="type"]').on('change', function() { var show = $(this).val(); $(".typechoice").hide(); $("#"+show).show(); }) <script src="h ...
We are striving to showcase the names listed in our JSON file within a div using JavaScript. Despite multiple attempts, we have not yet achieved success. JSON data: This is the approach we took: <button>fetch data</button> <div id="result ...
Looking for guidance on how to set an index to user-provided values in a textbox, append them to a table in a new row, and display that index in the first column of every row. I am unfamiliar with this type of functionality. $(document).ready(function() ...
Can you pass a function to a component in stencilJs? For example: @Prop() okFunc: () => void; I have a modal and would like to trigger a passed function when the Ok button in the modal footer is clicked, similar to an onClick event on a standard HTML ...
Is there a way to decrease the space between the paragraph and the border of this fieldset? I attempted to adjust the margins in the following manner: fieldset { margin: 1px; margin-top: 2px; border-top-right-radius: 1px; } <fieldset> < ...
Basic code snippet: <?php session_start(); if ((!isset($_SESSION['valid']) == true)) { unset($_SESSION['valid']); header('location:index.php'); } ?> <!DOCTYPE html> <html lang="pt-br"> <h ...
@foreach (var item in APModel) { <div class="row row-cols-1 row-cols-md-2 g-4"> <div class="col"> <div class="card" style="width: 18rem;"> <img src="h ...
How can I ensure that the following CSS only applies to small devices (mobile) and not on tablets as well? @media (max-width: 980px) { h2 { font-size: 3em; } p { font-size: 2.3em; line-height: 1.7em; } button { width: 400px; ...
I've encountered a peculiar issue that I haven't come across before. The HTML on my website is generated through Django templates, containing basic code to initialize a DataTable using a query string with GET variables (e.g. "/report1/?filter1=ab ...
Currently, I have a file structured like this: <?php if(some condition) { //Access Denied } else { echo "<html>My HTML Code</html>"; } ?> However, I am looking to optimize my PHP file by simplifying it with the following structu ...
Seeking assistance in extracting the text content within an anchor tag that is nested inside a heading tag. <h1 class="branded-page-header-title"> <span class="qualified-channel-title ellipsized"><span class="qualified-channel-title-w ...
Having some trouble with jQuery as I try to dynamically add and remove HTML elements (on click of +) while also making sure each element has a unique name and ID like "name_1", "name_2"... Unfortunately, things aren't quite going as planned. Below i ...
I am having trouble figuring out how to make a form trigger a JavaScript function when the return key (13) is pressed, in addition to clicking the submit button. Here is my HTML code: (Please note that MakeRequest() is a JavaScript method that sends a req ...
Utilizing React JS in my current project involves a two-level menu system. Upon hovering over a menu item, the corresponding sub-menu should appear and disappear when the mouse leaves the area. However, a challenge arises when all sub-menus appear simultan ...
Is there a way to use the jQuery.validator.addClassRules method in order to validate input fields and restrict my textbox to only accept comma-separated values? I also want it to display a default message if incorrect. <input type="text" cla ...
I utilize Google Code Prettify for syntax highlighting my code. Below is the HTML snippet I use: <head> <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script> </head> <body> ...
I have a set of radio buttons arranged like this: https://i.sstatic.net/l4uhp.png I want to utilize flexbox to display them horizontally when there is sufficient space, similar to this: https://i.sstatic.net/IGUAc.png However, the current setup uses a ...
Is there a way to dynamically load the content of various HTML files into a specific element on my index.html page when different menu links are clicked? This would help avoid duplicating menus across multiple HTML files and make maintenance much easier. ...
Having trouble using a single letter as a logo due to the size of the containing box, known as the 'em-box', being too large or too small? Click here for an example: https://i.sstatic.net/4MJpr.png I want the letter to fit perfectly within the ...
My panel features multiple collapsible filters that expand when a button is clicked. However, after each postback, the div collapses again. How can I ensure that the current state of the div remains consistent across postbacks? <h4 class="contentFil ...