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
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.
Tags: java, javascriptjavascript
