The width of the table remains consistent

I have created a division that includes two tables stacked on top of each other. However, I am facing an issue where the width of the second table remains fixed and does not change even when I try to increase it.

Here is the code snippet below:

function delete_row(no)
{
    document.getElementById("row"+no+"").outerHTML="";
}
function add_row(no)
{
    document.getElementById('table1').style.display='block';
    var data=document.getElementById("row"+no+"");
    var table=document.getElementById('table1');
    var h=data.innerHTML.split("</td>");
    var w=h[0];
    var index = w.indexOf("width:50%");
    var res=w.replace('width:50%','width:1020px');
    var res1=res.replace('colspan="1"','');
    console.log(table.rows+" "+table.rows.length+" "+res1+" ");
   var table_len=(table.rows.length);
   var row = table.insertRow(table_len).outerHTML="<tr 
   id='row"+table_len+"'>"+res1+"</td></tr>";
  document.getElementById("row"+no+"").outerHTML="";
  }
        table {
                   margin-left: -4%;
                  float: left;
                  clear: left;
                 width: 378px;
                 background: rgba(255,255,255,0.6);
        }
       td ,th{
        width: 378px;
        padding:5px;
        vertical-align:top;
       }
      td img{
       width: 40px;
       height: 40px;
       color: white;
      }
      th {
       font-weight:bold;
       border:4px solid  #333; 
       z-index: 999;
       background-color: #666666;
       }

     td {
      border:none;
      border-bottom: 4px solid  #333;
      z-index: 999;
     }
 <div class="full-width" style="" id="prof2">
  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="z-index:0; ">
   <div class="custom-form">
    <div class="text-center bg-form" style="width:110%">
    <div class="img-section">
      <a href="#" class=" glyphicon glyphicon-remove" style=" float: left;margin-left: 5px" onclick="document.getElementById('prof2').style.display='none';"></a>
      <h2 style=" font-family: 'Baskerville';color: white">Security Settings</h2>
     </div>
   </div>
    <div class="col-lg-12 col-md-12" style="">
    <table border="1" style=" margin-left: -17px;;width: 383px" class="table2" id='table2'>
      <tbody>
        <tr id='row1'>
          <td colspan="1" style=" width:50%;font-size: 30px;font-family: 'Baskerville'"><img src="5K-HD-Wallpapers-download-Desktop-5K-Wallpapers-Background-for-PC-Desktop-Laptop-18.jpg" alt="" />Adeete</td>
          <td colspan="1" style="width:70%">
            <button class=" btn btn-success" style=" width: 80px;height:35px;margin-top: 4px;;" onclick="add_row(1)">ACCEPT</button>
            <button class=" btn btn-danger" style=" width: 80px;height:35px;margin-left: 5px;;margin-top: 4px;" onclick="delete_row(1)">REJECT</button>
          </td>
        </tr>
        <tr id='row2'>
          <td colspan="1" style=" width:50%;font-size: 30px;font-family: 'Baskerville'"><img src="5K-HD-Wallpapers-download-Desktop-5K-Wallpapers-Background-for-PC-Desktop-Laptop-18.jpg" alt="" />Akanksha</td>
          <td colspan="1" style="width:70%">
            <button class=" btn btn-success" style=" width: 80px;height:35px;margin-top: 4px;;" onclick="add_row(2)">ACCEPT</button>
            <button class=" btn btn-danger" style=" width: 80px;height:35px;margin-left: 5px;;margin-top: 4px;" onclick="delete_row(2)">REJECT</button>
          </td>
        </tr>
        <tr id='row3'>
          <td colspan="1" style=" width: 50%;font-size: 30px;font-family: 'Baskerville'"><img src="5K-HD-Wallpapers-download-Desktop-5K-Wallpapers-Background-for-PC-Desktop-Laptop-18.jpg" alt="" />Saumya</td>
          <td colspan="1" style="width:70%">
            <button class=" btn btn-success" style=" width: 80px;height:35px;margin-top: 4px;;" onclick="add_row(3)">ACCEPT</button>
            <button class=" btn btn-danger" style=" width: 80px;height:35px;margin-left: 5px;;margin-top: 4px;" onclick="delete_row(3)">REJECT</button>
          </td>
        </tr>
        <tr>
          <td colspan="2">That's all</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="col-lg-12 col-md-12" style="padding-bottom: 20px">
    <table border="1" style=" margin-left: -17px;width:1020px;display: none" class="table1" id="table1">
      <tbody>
        <tr>
          <th style=";width:1020px">Friend Requests Accepted</th>
        </tr>
      </tbody>
    </table>
  </div>
</div>

javascriptjqueryhtmlcss

Answer №1

function removeRow(num)
{
    document.getElementById("row"+num+"").outerHTML="";
}
function insertRow(num)
{
    document.getElementById('table1').style.display='block';
    var data=document.getElementById("row"+num+"");
    var table=document.getElementById('table1');
    var splitData=data.innerHTML.split("</td>");
    var firstPart=splitData[0];
    var index = firstPart.indexOf("width:50%");
    var res=firstPart.replace('width:50%','width:1020px');
    var updatedRes=res.replace('colspan="1"','');
    console.log(table.rows+" "+table.rows.length+" "+updatedRes+" ");
   var len=(table.rows.length);
   var newRow = table.insertRow(len).outerHTML="<tr id='row"+len+"'>"+updatedRes+"</td></tr>";
  document.getElementById("row"+num+"").outerHTML="";
}
#table1, #table2 {
    font-family: 'Baskerville';
    border:1px solid #333;
    font-size: 30px;
}
#table1 .row, #table2 .row {
  border-bottom: 1px solid #333;
}
#table2 .row>div:last-child:not(:first-child) {
  border-left: 1px solid #333;
}
#table1 {
  display: none;
}
#table2 {

}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="full-width" id="prof2">
  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
   <div class="custom-form">
    <div class="text-center bg-form">
      <div class="img-section">
        <a href="#" class=" glyphicon glyphicon-remove float-left" style="margin-left: 5px" onclick="document.getElementById('prof2').style.display='none';"></a>
        <h2 style=" font-family: 'Baskerville';color: white">Security Settings</h2>
      </div>
    </div>
    <div class="col-lg-12 col-md-12" id="table2">
      <div class="row">
        <div class="col-sm-1">
          <img src="5K-HD-Wallpapers-download-Desktop-5K-Wallpapers-Background-for-PC-Desktop-Laptop-18.jpg" alt="" />
        </div>
        <div class="col-sm-9">
          Adeete
        </div>
        <div class="col-sm-2">
          <button class=" btn btn-success" onclick="insertRow(1)">ACCEPT</button>
          <button class=" btn btn-danger" onclick="removeRow(1)">REJECT</button>
        </div>
      </div>

      ... Additional rows and buttons here ...

</div>

Please remember to keep your HTML clean and handle styling in CSS only.

function delete_row(no)
{
    document.getElementById("row"+no+"").outerHTML="";
}
function add_row(no)
{
    document.getElementById('table1').style.display='block';
    var data=document.getElementById("row"+no+"");
    var table=document.getElementById('table1');
    var h=data.innerHTML.split("</td>");
    var w=h[...]; 
    var index = w.indexOf("width:50%");
    var res=w.replace('width:50%',...); 
     var res1=res.replace(...,'');
    console.log(table.rows+" "+table.rows.length+" "+res1+" ");                   

}
/* Add your CSS code here */
...

<!-- Add your HTML content here -->
...

Answer №2

Give this a shot:

table {
  table-layout: fixed;
}

Visit this link for more information.

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

"Need a hand with bookmarklets? Try using this code: document

Having an issue with my bookmarklet JavaScript where it always adds the www. portion to the domain. Any ideas on how to make it work by removing the www portion from the URL? Appreciate any help. javascript:void(window.open('http://siteanalytics.comp ...

javascriptbookmarklet

Determine the variance among time stamps

After creating a registration page, I implemented functionality where when a user clicks the submit button, an activation link is sent to their email and a timestamp is stored in the database. To ensure security, I need to verify if the activation link was ...

phphtmldatabasecodeignitertimestamp

There was an error loading the resource as the Object does not have the method 'adGallery'

For the past two days, I have been attempting to implement the jQuery plugin "ad-gallery" on my website without success. I must mention that my knowledge in JavaScript and CSS is limited, so the issue could be something simple. The peculiar thing is that ...

jquerycssgallery

React TextField is not accommodating the new line character ' ' causing recognition issues

Explanation I have encountered an issue while using Material UI TextField and mapping through an array of objects fetched from a MongoDB database. Here is the code snippet in question: {state.map((item) => ( <TextField name=" ...

javascriptreactjsmaterial-uitextfield

Tips for retrieving JSON data from an AJAX call and displaying it pre-filled in an input field

Here is the code snippet I used to receive a response in JSON format, but when I try to display the response using alert(response.Subject);, it shows as "undefined". HTML: <input type="text" id="subject" value='Subject'> Javascript: $.a ...

javascriptjqueryhtmlajaxjson

html2canvas bottom margin

I coded this in react function download(element) { html2canvas(element).then((canvas) => { window.open(canvas.toDataURL('image/png')); }); } return ( <div className='box' onClick={( ...

htmlcsscanvashtml2canvas

Include content within the navigation bar of Bootstrap 3.3

I am trying to insert text at the end of the header in a jumbotron template: <div id="navbar" class="navbar-collapse collapse"> <form class="navbar-form navbar-right"> <div class="form-group"> <input type="text ...

csstwitter-bootstrap

What is the method for displaying a canvas scene within a designated div element?

I need help displaying a scene inside an existing div on my webpage. Whenever I try to do this, the canvas is always added at the top of the page. I attempted to use getElementById but unfortunately, it didn't work as expected. What could I be overlo ...

javascriptjquerycanvas3dthree.js

The battle between CSS and jQuery: A guide to creating a dynamic zebra-style table without relying on additional plugins

Is there a better way to create a dynamic zebra styling for table rows while still being able to hide certain elements without losing the styling? In this code snippet, I'm using the CSS :nth-of-type(even) to style even rows but running into issues wh ...

javascriptjquerycsshtml

Learn how to dynamically switch the background image of a webpage using a button in AngularJS

Hey there, I'm currently working on incorporating interactive buttons into my website to give users the ability to customize the background. I've been experimenting with Angular to achieve this feature. So far, I've managed to change the ba ...

javascripthtmlcssangularjs

javascript issue with setting the id attribute on a select option

I can't seem to set the id attribute in my select element using JavaScript. When I inspect it, the id attribute isn't showing up... Here's the first method using JS: var selectorElem = document.getElementById('selector') var ...

javascripthtmlreactjsselect

Unlock the potential of displaying similar object values side by side in JavaScript, React, and ES6 - here's how!

Currently, I am dealing with an object called segregatedData which is being passed as props. Among its several properties, we are interested in segregatedData.type1. This particular property is essentially an array of strings similar to this: ['water& ...

javascriptarraysreactjssortingforeach

Automatically save user input in form fields with the help of jQuery and AJAX technology

I'm working on a form that has various input fields, and I need the data entered by the user to be automatically stored in the database every minute. After the user submits the request, it will be processed in a struts file where database interactions ...

javascriptjqueryajaxjquery-plugins

The function passed to the modal is not functioning correctly when stored within the state

Is it possible to create a unique modal that can be utilized for multiple actions on the same page? To achieve this, I have implemented a state to store the title, description, and submit function for modal click and modal open state. In addition, I want t ...

javascriptreactjsfunctionmaterial-ui

Email Form Application: Utilizing NodeJs and Express - Error: URL Not Found /

I'm encountering a "cannot GET" error whenever I try to run my application on a live server using VS Code. My assumption is that the issue lies within my routing configuration, but I'm struggling to identify the exact problem. Any assistance woul ...

javascripthtmlcssnode.jsexpress

"Empty array conundrum in Node.js: A query on asynchronous data

I need assistance with making multiple API calls and adding the results to an array before returning it. The issue I am facing is that the result array is empty, likely due to the async nature of the function. Any help or suggestions would be greatly appre ...

javascriptnode.jsexpressasynchronousfetch

Using CSS to apply a gradient over an img element

Looking to add a gradient overlay to an <img> tag with the src attribute set to angular-item. Here's an example: <img src={{value.angitem.image}}> I attempted to create a CSS class: .pickgradient { background: -webkit-gradient(linear ...

htmlangularjscssgradient

Imitate a keypress within a hidden web browser component using C#

Currently, I am engaged in a project that requires me to navigate a webpage and gather information about products, prices, etc. using the webbrowser object in .NET 3.5. The challenge arises because the page contains fields with an ajax suggest script, mak ...

c#.nethtmlajaxbrowser

Choosing a BeautifulSoup tag according to attribute value

Imagine we have an HTML page with an index and some content below. Each element in the index is linked to a related section in the document. Let's say our starting point is an anchor tag with an href value of "#001". We want to search through all the ...

pythonhtmlbeautifulsoup

Optimal method for showcasing a multitude of columns on an HTML page

Seeking to showcase a vast array of data in HTML (over 10,000 columns with approximately 200-300 rows) to present a schedule. The information will be structured as movable blocks containing text and background colors. Is it feasible to exhibit such a mas ...

htmlhtml-tablehtml5-canvas