Я хочу иметь ячейки таблицы шириной 60%, 20% и 20%, я использую jquery Я добавил встроенный стиль, как показано ниже. Я попытался установить для свойства display значение unset, прежде чем оно стало таблицей.
let $ cell00 = $ (''). AppendTo ($ row22). css ({"width": "60%" });
Похоже, что они не имеют никакого эффекта, они кажутся в случае 33%, 33% и 33%.
Как получить значение ширины 60%, 20 % и 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>
новое изображение
