Question

我希望表格单元格的宽度为60％，20％和20％，我使用的jquery我添加了内联样式，如下所示。我尝试将显示属性设置为未设置表格。

let $ cell00 = $（''）。appendTo（$ row22）.css（{“ width”：“ 60％”}）;;

在33％，33％和33％的情况下，它们似乎没有任何作用。

如何获得宽度为60％，20％和20％的td？

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>

新图片

Answer 1

好像已经设置了

display:flex;

在桌子上。相反，不要在表格上设置显示，并以百分比或像素为单位设置宽度。在此之后，如果您以百分比形式给出td宽度，则应该可以。

如何设置表格宽度td宽度

1 个答案: