Is it possible to design a table using CSS that has the first three columns with a fixed width in pixels and the rest with a width in percentage like the example shown here:
I am familiar with creating columns with variable or fixed widths, but unsure how to achieve this specific layout.
Embed a new table within the existing structure to create four columns on the right-hand side. Here is how the HTML code would appear:
<table class = "big first">
<tr>
<td class = "px10">Cell1</td>
<td class = "px20">Cell2</td>
<td class = "px30">Cell3</td>
<td>
<table class = "big">
<td>1</td><td>2</td><td>3</td><td>4</td>
</table>
</td>
</tr>
</table>
CSS:
.big {
width: 100%;
}
.first {
table-layout: fixed;
}
.big, .big td {
border: 1px solid black;
}
.big td {
background: rgb(0, 162, 232);
}
.big .px10 {
background: orange;
width: 10px;
}
.big .px20 {
background: green;
width: 20px;
}
.big .px30 {
background: yellow;
width: 30px;
}
View a demonstration here: click here.
Update: There may not be a necessity for an additional table: alternate link.
If you want to display the last four cells in a table within a td of the main table, you can achieve this by utilizing the following structure:
<div class="wrapper">
<table class="table-main">
<tr>
<td class="first"> </td>
<td class="second"> </td>
<td class="third"> </td>
<td class="fluid">
<table class="table-wrapped">
<tr>
<td class="td-quarter"> </td>
<td class="td-quarter"> </td>
<td class="td-quarter"> </td>
<td class="td-quarter"> </td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<style>
.wrapper { min-width: 150px; max-width: 550px;}
.table-main { width: 100%; background: blue; }
td { border: 1px solid #000; background: #fc0; height: 20px; }
.first { width: 10px; }
.second { width: 20px; }
.third { width: 30px; }
.fluid { min-width: 100px; max-width:500px;border:0;}
.table-wrapped { width:100%;}
.td-quarter { width: 25%; background:blue; }
</style>
The original question was about creating a stylish table using CSS3
Here is the table design achieved with minimal CSS3 code
Check out the CSS3 code below:
<div id="first">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div id="second">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
Here is the corresponding CSS code:
#first, #second {
float:left;
overflow:hidden;
}
#first > div, #second > div {
float:left;
}
#first > div:first-child {
width:10px;
}
#first > div:nth-child(2) {
width:20px;
}
#first > div:nth-last-child(1) {
width:30px;
}
#second {
min-width:100px;
max-width:500px;
}
#second > div {
width:25%;
}
View the live demo here
I am facing an issue where my fixed navbar code breaks up into individual boxes for the links when I try to scroll, covering the page title. How can I resolve this? My code is too long to post directly here, so it's available on pastebin at the follow ...
Is there a way to initially hide the div tag and then animate it in a slide toggle effect? I attempted using display:none on my '.accordion_box' followed by show() in slideToggle, but this results in adding the CSS property display: block. My goa ...
The below code snippet: <div data-role="navbar"> <ul> <li><a href="#page_1" data-transition="none">Heading 1</a></li> <li><a href="#page_2" class="ui-btn-active ui-state-persist">Heading 2</a& ...
I am struggling to figure out why my float: right; div is appearing below the container div. I need help understanding how to resolve this issue. Can anyone provide an explanation? I faced a similar problem on a different website in the past, but I can&apo ...
After creating an SVG with a base64 background image and two text areas for top and bottom texts, I encountered an issue on Internet Explorer and Edge. The problem is that the bottom text is aligned to the left instead of the center, and its position is in ...
My React board component consists of an array of divs that I want to arrange in a grid-like map. The issue is, when the div wraps to a new line, there is significant space between each row. I aim to have the divs close together with no gaps. GameMap state ...
I'm encountering an issue with my ajax function. I am trying to change the CSS for certain HTML elements on 'success', using the following code: success:function(d){ $('#name').css('weight','normal'); ...
I have a code snippet that displays a chart with dimensions of 500x500. However, I only want to show half of the chart, like 500x250. But whenever I adjust the values in the div, it resizes the entire chart instead of just showing half. My goal is to hide ...
To view the live demonstration, simply click here. I have an issue with my drop down menu where it is hidden upon first click. Additionally, I would like the drop down menu to disappear when clicked anywhere outside of its current display. How can I accomp ...
Is it possible to dynamically set a scale and margin for an element in order to center it fluidly using the wheel event? I am aiming to achieve a smooth transition while also adjusting scroll position on the wrapping element in a fluid manner. In the prov ...
I need the #blue div positioned below the #green div The #blue div should have a margin-top: -10px; property <style> #red{ width: 400px; border: 1px solid red; } #green{ width: 100%; height: 100px; ...
Hello, I could really use some help with a problem I'm facing. I am currently working on my personal portfolio website using react.js and bootstrap. I've integrated the react popupbox package, but I noticed that on small screens, my picture is no ...
I'm trying to implement a feature on my website where the page scrolls with a sliding effect when the user presses the "Scroll" button. However, I've encountered issues as it doesn't seem to work despite adding the necessary tags to my HTML ...
I came across a website that had a unique text loading effect, but despite my efforts, I couldn't find what it's called. Effect: https://i.stack.imgur.com/NyaSN.png Is there any plugin or CSS file available for this effect, similar to Bootstra ...
While everything works perfectly fine locally, an issue arises when the application is deployed to Azure. The problem lies in loading the CSS file and an error message stating "Resource interpreted as Stylesheet but transferred with MIME type text/plain" i ...
I am working with a Material UI Menu component and attempting to customize its border. Currently, I am only able to achieve this customization by using PaperProps inline on the Menu element. However, I already have a makeStyles object defined. Is there a ...
Currently, I am utilizing Angular 2.0 TypeScript along with the d3.js library to create graphics. My main focus is on applying CSS to the axis (especially shape-rendering: crispEdges;). Do you have any suggestions? Check out the code below: var vis = d3 ...
I am currently working on a component that I want to make clickable. However, when I wrap them in a <Link> element (from react-router-dom) or set component={Link} to="" on them, all the text inside them automatically becomes hyperlinks. For ...
After using the .val() method to enter data into a text box, I noticed that when trying to click "add", the button appears disabled. <input class="btn-primary action-submit" type="submit" value="Add" disabled=""> If I manually type in text, the dis ...
Struggling with customizing my navigation menu in CSS, I'm seeking assistance. My goal is to have the second child element of the navigation menu on a new line instead of below the first child (refer to the image for clarification). An example of the ...