Row within table extending beyond boundaries of parent div table

Is there a way to make a table row wider than its parent table?

I want the button at the bottom to extend beyond the borders of the table.

https://i.sstatic.net/VH0HP.png

Do I need to abandon the table styling to achieve this effect?

Check out this JsFiddle if you're interested in seeing how it's done.

HTML

<div id="topDest"><!-- display:table -->
  <h2>FAVORITE DESTINATIONS</h2>
  <ul>
    <li><a href="/travel/asia/china/">China Tour</a></li>
    <li><a href="/travel/europe/corsica/">Corsica Tour</a></li>
    ...
  </ul>
  <a href="/last-minute-deals.html">LAST MINUTE DEALS</a><!-- display:table-row -->
</div>
htmlcss

Answer №1

To achieve the desired result, modify the following CSS code:

#topDest > a {
    background: rgba(0, 0, 0, 0) linear-gradient(135deg, #ff9c00 0%, #ef7f09 35%) repeat scroll 0 0;
    color: #ffffff;
    display: block;
    line-height: 30px;
    margin: 0 -3px -3px;
    padding: 0 3px;
    text-align: center;
    width: 100%;
}

Answer №2

it can be a bit challenging

make sure to adjust your css with the code below

#topDest > a{
    display:inline-block; 
    width:104%;
    margin: 0 auto;
    color:#ffffff;
    line-height:30px;

    background: #ff9c00;
    background: -moz-linear-gradient(-45deg, #ff9c00 0%, #ef7f09 35%);
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#ff9c00), color-stop(35%,#ef7f09));
    background: -webkit-linear-gradient(-45deg, #ff9c00 0%,#ef7f09 35%);
    background: -o-linear-gradient(-45deg, #ff9c00 0%,#ef7f09 35%);
    background: -ms-linear-gradient(-45deg, #ff9c00 0%,#ef7f09 35%);
    background: linear-gradient(135deg, #ff9c00 0%,#ef7f09 35%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff9c00', endColorstr='#ef7f09',GradientType=1 );
    text-align: center;

    position:relative;
    left:-5px;
    right:-5px;
}

you can view the updated jsFiddle here

Answer №3

I made some adjustments to the code snippet:

#topDest > a{
  display:block; /* updated */
  margin: 0 -10px; /* added, please adjust this accordingly */
}

Here is the modified code:

/* Reset CSS*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* CSS styling for top destinations section */
.container{
    width:30%;
    margin: 0 auto;
}
#topDest{
    display:table;
    width: 100%;
    border:3px #39a9dc solid;
}
#topDest *{
    text-decoration:none;
    font-family: 'Helvetica Neue'
}
#topDest > a{
    display:block;  
    margin: 0 -10px;
    color:#ffffff;
    line-height:30px;
    
    background: #ff9c00;
    background: -moz-linear-gradient(-45deg, #ff9c00 0%, #ef7f09 35%);
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#ff9c00), color-stop(35%,#ef7f09));
    background: -webkit-linear-gradient(-45deg, #ff9c00 0%,#ef7f09 35%);
    background: -o-linear-gradient(-45deg, #ff9c00 0%,#ef7f09 35%);
    background: -ms-linear-gradient(-45deg, #ff9c00 0%,#ef7f09 35%);
    background: linear-gradient(135deg, #ff9c00 0%,#ef7f09 35%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff9c00', endColorstr='#ef7f09',GradientType=1 );
    text-align: center;
}

#topDest > a:hover{
    background: #39a9dc;
    background: -moz-linear-gradient(-45deg, #39a9dc 0%, #1686b9 35%);
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#39a9dc), color-stop(35%,#1686b9));
    background: -webkit-linear-gradient(-45deg, #39a9dc 0%,#1686b9 35%);
    background: -o-linear-gradient(-45deg, #39a9dc 0%,#1686b9 35%);
    background: -ms-linear-gradient(-45deg, #39a9dc 0%,#1686b9 35%);
    background: linear-gradient(135deg, #39a9dc 0%,#1686b9 35%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#39a9dc', endColorstr='#1686b9',GradientType=1 );
}

#topDest ul{
    background:#ffffff;
    padding: 0;
    margin-left: 15px;
}
#topDest li{
    line-height:1.5;
    font-size:14px;
}
#topDest ul li a{
    color:#000000;
}
#topDest h2{
    background: #39a9dc;
    background: -moz-linear-gradient(-45deg, #39a9dc 0%, #1686b9 35%);
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#39a9dc), color-stop(35%,#1686b9));
    background: -webkit-linear-gradient(-45deg, #39a9dc 0%,#1686b9 35%);
    background: -o-linear-gradient(-45deg, #39a9dc 0%,#1686b9 35%);
    background: -ms-linear-gradient(-45deg, #39a9dc 0%,#1686b9 35%);
    background: linear-gradient(135deg, #39a9dc 0%,#1686b9 35%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#39a9dc', endColorstr='#1686b9',GradientType=1 );
    color: #ffffff;
    font-size: 0.9em;
    text-align: center;
    margin: 0;
    padding: 10px 0;
}
<div class="container">&nbsp;
<div id="topDest" class="destRight">
  <h2>PREFERRED DESTINATIONS</h2>
  <ul>
    <li><a href="/travel/asia/china/">China Travel</a></li>
    <li><a href="/travel/asia/myanmar/">Myanmar Travel</a></li>
    <li><a href="/travel/europe/corsica/">Corsica Travel</a></li><!--
    <li><a href="/travel/europe/italy/">Italy Travel</a></li>
    <li><a href="/travel/oceania/australia/">Australia Travel</a></li>
    <li><a href="/travel/americas/us/miami/">Florida Travel</a></li>
    <li><a href="/travel/americas/argentina/">Argentina Travel</a></li>
    <li><a href="/travel/americas/brazil/">Brazil Travel</a></li>
    <li><a href="/travel/asia/cambodia/">Cambodia Travel</a></li>-->
    <li><a href="/travel/europe/norway/">Norway Travel</a></li>
    <li><a href="/travel/europe/spain/seville/">Andalusia Travel</a></li>
  </ul>
  <a href="/last-minute.html">LAST MINUTE DEALS</a>
</div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating a table in HTML using the innerHTML property

document.getElementById("outputDiv").innerHTML = ""; document.getElementById("outputDiv").innerHTML += "<table border=1 width=100%><tr>"; for(j=1;j<=10;j++) { document.getElementById("outputDiv").innerHTML += "<td align=center>"+St ...

javascripthtml

What are the steps to retrieve historical stock data for over one year using Yahoo Finance YQL query?

I am currently using a Tableau web connector to retrieve stock price data. Here is the source code: <html> <meta http-equiv="Cache-Control" content="no-store" /> <head> <title>Stock Quote Connector-Tutorial</title> <sc ...

javascripthtmltableau-apiyqlyahoo-finance

What is the best method for creating a distinctive identifier in HTML and jQuery?

Coding in HTML: @foreach($permission->childs as $subMenu) <tr> <td>{{$subMenu -> id}}</td> <td> &nbsp; &nbsp;{{$subMenu -> display_name}}</td> <td ...

htmljquery

Text aligned at the center of the Y and X axis

I am looking to center my content along the Y axis instead of only on the X axis. To prevent the page from expanding beyond its current size, I have applied the following CSS: html { overflow-y: hidden; overflow-x: hidden } What I want to achieve is havi ...

javascriptjqueryhtmlcss

Retrieve the radio button value from the HTML form

This website is designed to calculate ideal weight based on input data, but I am encountering an issue with the gender selection. The code seems to only recognize the first condition for female, while ignoring the else if condition for male. How can I fix ...

javascripthtml

Personalized sorting to match the unique rendering of cells in Material UI Data Grid

I have integrated the Material UI V4 Data Grid component into my React Js application. The Data Grid component requires two props: rows (list type) and columns (list type). Below is a sample row item: const rows = [ { id: 1, customerName: " ...

javascriptcssreactjsmaterial-ui

What is the solution to prevent angular-material components from covering my fixed navbar?

After creating a navbar using regular CSS3, I incorporated input fields and buttons from angular material. However, my sticky navbar is being obscured by the components created with angular material. Here is the CSS for the navbar: position: sticky; top: ...

cssangularangular-materialangular7

Integrate my API with HTML using J.Query/Ajax technology

Finally, after much effort, I have successfully created a JSON java API. My API design is simple and based on Interstellar movie details: { "title": "Interstellar", "release": "2014-11-05", "vote": 8, "overview": "Interstellar chronicl ...

javascriptjqueryhtmljsonajax

What is the best way to incorporate multiple versions of jQuery on one webpage?

Is it possible to use multiple versions of jQuery on a single page? I need two different versions for various functions, but they seem to be conflicting with each other. If I implement jQuery noconflict, will the product scripts still work? <script typ ...

javascriptjqueryhtml

Can CSS be used to dynamically change the color of an element based on a specific value?

Is it possible to dynamically change the background color of table cells using only CSS based on their values? For example, I am looking to achieve a similar effect as in Excel with conditionally formatted values: https://i.stack.imgur.com/6BsLB.png If ...

htmlcsscolorsconditional-formatting

Enhancing URLs with jQuery/AJAX: A Comprehensive Guide to Adding Parameters

Whenever I try to use the get method on an HTML form, the submitted data automatically appears in the URL. You can see what I mean here. Interestingly, when attempting to achieve the same result with JQuery and AJAX using the get method, the data doesn&apo ...

phpjavascriptjqueryhtmlajax

Filtering Tables with AngularJS

Currently, I'm experimenting with using angularJS to filter data in a table. My goal is to load the data from a JSON file that has a structure like this (example file): [{name: "Moroni", age: 50}, {name: "Tiancum", age: 43}, { ...

javascripthtmlangularjs

Running a series of functions consecutively with JQUERY

Currently, I am facing an issue with using an ajax method .load to replace the content of a div. The library I am working with does not allow me to replace the content of a div as some functions continue to run in the background. To overcome this challeng ...

javascriptjqueryhtmlajax

The system considers the resource as a script, yet it was transmitted with the MIME type of text

I am encountering an issue when trying to integrate AngularJS/JavaScript into my HTML document. Each time I try to load my index.html file, the following error message appears: Resource interpreted as Script but transferred with MIME type text/html: "http ...

javascripthtml

What is the best way to ensure that a component remains the highest layer on a react-leaflet map?

I am encountering an issue where the table on my page only shows for a brief second when I refresh the page, and then it disappears. The Map Component being used is a react-leaflet map. I would like to have a component always displayed on top of the map wi ...

javascriptcssreactjsreact-leaflet

The precise placement of DIVs with a background image

Is there a way to properly position DIVs on top of a background image without them shifting when the screen size changes? Media Query hasn't been successful for me. Any suggestions? Here is my code: <div class="div-bg" style="background-image:url ...

htmlcss

Having trouble with displaying the CSS background image?

I've been attempting to configure background images using CSS, but for some reason, I'm not able to get the images to show up correctly. Below is the CSS code that I'm working with: a.fb { background-image: url('img/Facebook.png&a ...

htmlcss

Using PHP to extract specific content from an HTML page within a div element

I've been working on embedding a section of a website into my own site for security reasons. Unfortunately, I can't reveal the specific website I'm trying to embed, so let's use bbc.co.uk as an example. Here is the PHP/HTML code: < ...

phphtmlparsing

Identify the geometric figure sketched on the canvas using the coordinates stored in an array

After capturing the startX, startY, endX, and endY mouse coordinates, I use them to draw three shapes (a line, ellipse, and rectangle) on a canvas. I then store these coordinates in an array for each shape drawn and redraw them on a cleared canvas. The cha ...

javascripthtmlcanvas

Exploring the Power of JQuery Load and CSS styling

Currently, I am dynamically loading text into a div. However, I am encountering an issue where the content below this div is constantly shifting depending on the loaded text. Is there a way to restrict the space allocated to the div with the dynamic conte ...

jquerycssajax