Home » Jquery » javascript – How to set width of table td width

javascript – How to set width of table td width

Posted by: admin February 22, 2020 Leave a comment

Questions:

I want to have table cells of width 60 %, 20% and 20%, I use jquery I have added inline style as shown below. I tried setting display property to unset before it was table.

let $cell00 = $(”).appendTo($row22).css({“width”:”60%”});

They don’t seem to have any effect they seem to be in 33%, 33% and 33% case.

How to get the td of width 60%, 20% and 20%?

function maintest () {

   table1();
   addClasses();
  }
 
 
 function table1 () {
    addClasses ();
   
    let h1 = $("<h3>").html("Borrowed Features:").prop("class","underline").appendTo("#BorrowedTable");
    let $table1 = $('<table>').attr({"id" : "borrowed"}).appendTo("#BorrowedTable");
    let $row11 = $('<tr>').appendTo($table1);
    let header1 = $('<td>').text("Feature").appendTo($row11).css({"width":"60%"});
    let header12 = $('<td>').text("Return Date").appendTo($row11).css({"width":"20%"});
    let $header22 = $('<td>').appendTo($row11).css({"width":"20%"});
    $('<button>Return All Now</button>').appendTo($header22).css({"bottom":"20px","position":"relative"});

    for( i=0 ; i < 3 ; i++ ) {
        let $row22 = $('<tr>').appendTo($table1);
        let $cell00 = $('<td>').appendTo($row22).css({"width":"50%"});  
        let $autocomplete12 = $("<input>").attr({"id" : "selector"+i+1,"class":"biscuitColorInput"}).appendTo($cell00);

        let $cell11 = $('<td>').appendTo($row22).css({"width":"20%"});  
        let $autocomplete22 = $("<input>").attr({"id" : "date"+i+1,"class":"biscuitColorInput"}).appendTo($cell11);

        let $cell22 = $('<td>').appendTo($row22).css({"width":"20%"});  
        let $autocomplete33 = $("<button> Return Now </button>").attr("id" , "returnBtns"+i+1).appendTo($cell22).css({"bottom":"20px","position":"relative"});
     
    }
   
}





function addClasses () {
    let tableRows = $('tr').addClass('tableRows');
    let tableDefn = $('td').attr({"class":"tableDefn"});
    let tableHeader = $('th').attr({"class":"tableHeader"});
    let tbodyDOM = $('tbody').attr({"class" : "tbodyDOM"});
}
#buttonsdiv {
     height: unset !important;
     width:50%;
     position: relative;
     left :50px !important;
     bottom :0px !important;
     background-color: papayawhip !important;
  }
 
  #BorrowedTable, #BorrowableTable {
    display: flex !important;
    flex-direction: column;
    height:fit-content !important;

  }
 
 
    #borrowed , #borrowable {
      display: unset !important;
      border-collapse: collapse;
      border-spacing :unset !important;
      margin-left:100px;
  }
 
 
  #BorrowedTable,.biscuitColorInput {
    background-color: sandybrown;
  }
 
  #BorrowableTable,.creamcolorInput,#buttonsdiv {
    background-color: papayawhip;
   
  }
 
.tableRows, .tableDefn, .tableHeader { /*added from addClasses() */
   
      padding: 0;
      margin: 0;
      font-family: ffunit;
      font-size: 14px;
      font-weight: bold;
      padding-right: 50px !important;
    }
 
 
 
   button {
      height:36px;
      width:205px;
      cursor: pointer;
      border: solid 1px;
      background-color:#f2a900;
      font-family: ffunit;
      font-size: 14px;
      margin-top:20px;
      margin-left: 1px;
  }


  input {
    height: 30px;
    width: 100%;
    font-size: 20px;
    text-indent: 6px;
   
  }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<body onload="maintest()">

   <div id="BorrowedTable"></div>
 
</body>

new image

enter image description here

How to&Answer:

Seems like you have set

display:flex;

on table. Instead don’t set display on table and give it some width either in percentage or in pixels. After this if you give width in percentage to td it should work.