Question

我正在尝试将表格的宽度从33.33％的宽度更改为auto，但是每次这样做都会中断。我希望表格中的每一列只能与最长的文本元素的文本一样宽。

new PerfectScrollbar('#table tbody');

	    #table thead {
        display: block;
        width: 100%;
      }

      #table tbody {
        display: block;
        width: 100%;
      }

      #table tr {
        display: block;
        width: 100%;
      }

      #table tbody {
        max-height: 370px;
        overflow-y: auto;
        overflow-x:hidden;
        position: relative;
      }

      #table thead th {
        background: #406AA3;
        color: white;
      }

      #table tbody td {
        display: block;
        width: 33.33%;
        float: left;
        height: 41px;
      }

      #table thead th {
        display: block;
        width: 33.33%;
        float: left;
        border: 1px solid #dee2e6;
        height: 41px;
      }

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://rawgit.com/utatti/perfect-scrollbar/master/css/perfect-scrollbar.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://rawgit.com/utatti/perfect-scrollbar/master/dist/perfect-scrollbar.js"></script>

<div class="row pt-2">
      <div class="col-12">
        <div>
          <table class="table table-bordered" id="table">
            <thead>
            <tr>
              <th>Name</th><th>Age</th><th>Occupation</th>
            </tr>
            </thead>
            <tbody>
            <tr>
              <td>Alex</td><td>20</td><td>Student</td>
            </tr>
            <tr>
              <td>Paul</td><td>23</td><td>Engineer</td>
            </tr>
            <tr>
              <td>Chris</td><td>19</td><td>Human being</td>
            </tr>
            <tr>
              <td>Satoshi</td><td>30</td><td>Pokemon trainer</td>
            </tr>
            <tr>
              <td>Jun</td><td>27</td><td>Hero</td>
            </tr>
            <tr>
              <td>Yong</td><td>27</td><td>Money maker</td>
            </tr>
            <tr>
              <td>Alex</td><td>20</td><td>Student</td>
            </tr>
            <tr>
              <td>Paul</td><td>23</td><td>Engineer</td>
            </tr>
            <tr>
              <td>Chris</td><td>19</td><td>Human being</td>
            </tr>
            <tr>
              <td>Satoshi</td><td>30</td><td>Pokemon trainer</td>
            </tr>
            <tr>
              <td>Jun</td><td>27</td><td>Hero</td>
            </tr>
            <tr>
              <td>Yong</td><td>27</td><td>Money maker</td>
            </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>

Answer 1

由于flebox可以垂直或水平移动，所以我认为function Failure { $global:helpme = $body $global:helpmoref = $moref $global:result = $_.Exception.Response.GetResponseStream() $global:reader = New-Object System.IO.StreamReader($global:result) $global:responseBody = $global:reader.ReadToEnd(); Write-Host -BackgroundColor:Black -ForegroundColor:Red "Status: A system exception was caught." Write-Host -BackgroundColor:Black -ForegroundColor:Red $global:responsebody Write-Host -BackgroundColor:Black -ForegroundColor:Red "The request body has been saved to `$global:helpme" break } Measure-command { If ((Get-PSSnapIn -Name Microsoft.SharePoint.PowerShell -ErrorAction SilentlyContinue) -eq $null ) { Add-PSSnapIn -Name Microsoft.SharePoint.PowerShell } $StartDate=(GET-DATE) $CutOffDate=(Get-date).AddDays(-540) $SPAssignment = Start-SPAssignment $SPWeb = Get-SPWeb https://oursite/sites/billing -AssignmentCollection $spAssignment # Next step is to get the list: $SPList = $SPWeb.Lists["Bill Cycles"] $spqQuery = New-Object Microsoft.SharePoint.SPQuery $spqQuery.Query = " <Where> <And> <Eq> <FieldRef Name='Bill_x0020_Preparation_x0020_Status' /> <Value Type='Text'>COMPLETED</Value> </Eq> <Leq> <FieldRef Name='Bill_x0020_to_x0020_date' /> <Value Type='DateTime'> <Today OffsetDays='540' /> </Value> </Leq> </And> </Where>" $spqQuery.ViewFields = "<FieldRef Name='Bill_x0020_Preparation_x0020_Status' /><FieldRef Name='Title' /><FieldRef Name='Bill_x0020_to_x0020_date' /><FieldRef Name='ContentType'/><FieldRef Name='ID'/>" $spqQuery.ViewFieldsOnly = $true $splListItems = $SPList.GetItems($spqQuery) $iNumber=1 $iNumberOfContentTypes=1 $iNumberOfBillCyclesArchived=0 $iNumberOfBillCyclesArchivedFailed=0 $cred = Get-Credential foreach ($splListItem in ($splListItems | Select-Object -First 10) ) { $iNumber+=1 if( $splListItem["ContentType"] -eq "Bill Cycle"){ try { #Start-Sleep -s 65 $Url = "https://oursite/sites/billing/_vti_bin/DMS/DMSWebService.svc/Billing/ArchiveBillCycle/"+$splListItem["ID"] #Write-Host $Url #https://oursite/sites/billing/_vti_bin/DMS/DMSWebService.svc/Billing/ArchiveBillCycle/145771 $r = Invoke-WebRequest -Credential $cred -Uri $Url -TimeoutSec 180 -ErrorAction:Stop #Write-Host $r.Content.ToString() if($r.Content -like '*<RequestSucceeded>false</RequestSucceeded>*') { write-host "Archiving Failed, File # $iNumber - Bill Cycle Id:" $splListItem["ID"], "Title:" $splListItem["Title"] , "ContentType:" $splListItem["ContentType"] , "Status:" $splListItem["Bill_x0020_Preparation_x0020_Status"] , "Billtodate:" $splListItem["Bill_x0020_to_x0020_date"] -ForegroundColor Red $iNumberOfBillCyclesArchivedFailed+=1 } elseif($r.Content -like '*<RequestSucceeded>true</RequestSucceeded>*') { write-host "Archived, File # $iNumber - Bill Cycle Id:" $splListItem["ID"], "Title:" $splListItem["Title"] , "ContentType:" $splListItem["ContentType"] , "Status:" $splListItem["Bill_x0020_Preparation_x0020_Status"] , "Billtodate:" $splListItem["Bill_x0020_to_x0020_date"] -ForegroundColor Green $iNumberOfBillCyclesArchived+=1 } else{ write-host "Archived, File # $iNumber - Bill Cycle Id:" $splListItem["ID"], "Title:" $splListItem["Title"] , "ContentType:" $splListItem["ContentType"] , "Status:" $splListItem["Bill_x0020_Preparation_x0020_Status"] , "Billtodate:" $splListItem["Bill_x0020_to_x0020_date"] -ForegroundColor Green $iNumberOfBillCyclesArchived+=1 } } catch { $iNumberOfBillCyclesArchivedFailed+=1 write-host "Archiving Failed, File # $iNumber - Bill Cycle Id:" $splListItem["ID"], "Title:" $splListItem["Title"] , "ContentType:" $splListItem["ContentType"] , "Status:" $splListItem["Bill_x0020_Preparation_x0020_Status"] , "Billtodate:" $splListItem["Bill_x0020_to_x0020_date"] -ForegroundColor Red Failure } $iNumberOfContentTypes+=1 } } Write-Host "Number of items in the query: " $iNumber Write-Host "Number of content types in the query: " $iNumberOfContentTypes Write-Host "Number of bill cycles archived: " $iNumberOfBillCyclesArchived Write-Host "Number of bill cycles archived failed: " $iNumberOfBillCyclesArchivedFailed }不适合，因为我们希望这些列照顾它们的内容，但是我们可以使用CSS Grid，这基本上是flexbox只关心垂直和水平。

flexbox

new PerfectScrollbar('.scroll');

*,
*:before,
*:after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.scroll {
  border: 1px solid black;
  display: inline-block;
  max-height: 150px;
  position: relative;
}

.grid {
  display: grid;
  grid-template-columns: auto auto auto;
}

.headercell {
  padding: 10px;
  background: dodgerblue;
  position: sticky;
  top: 0;
}

.tablecell {
  padding: 10px;
  background: #ccc;
}

Answer 2

我使用css display属性创建了表。

.tableCell {
  display: table-cell;
  border: 1px solid #dee2e6;
  height: 41px;
}

.tableRow {
  display: table-row;
}

.table {
  display: table;
  width: 200px
}

.tableBody {
  display: table-row-group;
}

.tableHeading {
  display: table-header-group;
}

.tableHead {
  display: table-cell;
  background: #406AA3;
  color: white;
  border: 1px solid #dee2e6;
  height: 41px;
}

.container {
  overflow: auto;
  max-height: 100px
}

<div class="container">
  <div class="table">
    <div class="tableHeading">
      <div class="tableRow">
        <div class="tableHead">Name</div>
        <div class="tableHead">Age</div>
        <div class="tableHead">Occupation</div>
      </div>
    </div>
    <div class="tableBody">
      <div class="tableRow">
        <div class="tableCell ">Alex</div>
        <div class="tableCell">20</div>
        <div class="tableCell">Student</div>
      </div>
      <div class="tableRow">
        <div class="tableCell ">CHris</div>
        <div class="tableCell">20</div>
        <div class="tableCell">Human Being</div>
      </div>
      <div class="tableRow">
        <div class="tableCell ">Satoshi</div>
        <div class="tableCell">20</div>
        <div class="tableCell">Pokemon Trainer</div>
      </div>
      <div class="tableRow">
        <div class="tableCell ">Yong</div>
        <div class="tableCell">20</div>
        <div class="tableCell">Engineer</div>
      </div>
    </div>
  </div>
</div>

Answer 3

我最终使用了DataTables插件，它解决了我遇到的各种问题。

使表格中的列只能与最长的文本元素的文本一样宽

3 个答案: