我怎样才能让这个表在HTML中工作 [英] How can I have this table working in HTML as well

问题描述

你好！



我目前正致力于使普通表看起来更好而且我使用了CSS，但我无法让表正常运行HTML和我需要它才能工作，我无法完成它。



这是我的CSS代码

Hello!

I am currently working on making a normal table looks better and I used CSS for this, but I couldn't have the table being functional in HTML and I need that to work and I wasn't able to accomplish it.

Here is my CSS code

.table {
  margin-top: 10px;
  border-collapse: collapse;
  width: 100%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  display: table;
  border-spacing: 5px;
}

@media screen and (max-width: 580px) {
  .table {
    display: block;
  }
}

.row {
  display: table-row;
  background: #f6f6f6;
}

.row:nth-of-type(odd) {
  background: #e9e9e9;
}

.row.header {
  font-weight: 900;
  color: #ffffff;
  background: #808080;
}

.row.green {
  background: #27ae60;
}

.row.blue {
  background: #2980b9;
}

@media screen and (max-width: 580px) {
  .row {
    padding: 8px 0;
    display: block;
  }
}

.cell {
  padding: 6px 12px;
  display: table-cell;
}

@media screen and (max-width: 580px) {
  .cell {
    padding: 2px 12px;
    display: block;
  }
}

这是HTML代码

Here is the HTML code

div class="table">
    
    <div class="row header">
      <div class="cell">
        Name
      </div>
      <div class="cell">
        Category
      </div>
      <div class="cell">
        Amount
      </div>
      <div class="cell">
        Location
      </div>
	  <div class="cell">
        Purchase date
      </div>
    </div>
    
    <div class="row">
      <div class="cell">
        Banana
      </div>
      <div class="cell">
        Fruit
      </div>
      <div class="cell">
        1
      </div>
      <div class="cell">
        Amsterdam
      </div>
	  <div class="cell">
        2015-02-16
      </div>
    </div>
    
    <div class="row">
      <div class="cell">
        Tomato
      </div>
      <div class="cell">
        Vegetable
      </div>
      <div class="cell">
        3 
      </div>
      <div class="cell">
        Zaandam	
      </div>
	  <div class="cell">
        2015-02-17
      </div>
    </div>
    
    <div class="row">
      <div class="cell">
        Ham	
      </div>
      <div class="cell">
        Meat	
      </div>
      <div class="cell">
        2
      </div>
      <div class="cell">
        Rotterdam
      </div>
	  <div class="cell">
        2015-02-18
      </div>
    </div>
    
    <div class="row">
      <div class="cell">
	     <input type="text" name="name" form="inventory_form" required>
      </div>
      <div class="cell">
		<input type="text" name="category" form="inventory_form" required>
      </div>
      <div class="cell">
         <input type="number" name="amount" form="inventory_form" required>
      </div>
      <div class="cell">
		<input type="text" name="location" form="inventory_form" required>
      </div>
	  <div class="cell">
        <input type="date" name="date" form="inventory_form" required>
      </div>
    </div>	
	<div>
	  <input type="submit" value="Submit" form="inventory_form">
	</div>
  </div>

I感谢任何帮助，谢谢！



我尝试过：



我尝试使用像tr和td这样的表标签，但没有显示任何表。

I'd appreciate any help, thanks!

What I have tried:

I tried using table tags like tr and td but no table was showing.

推荐答案

它正常工作，请参阅演示JSFiddle [ ^ ]。但是，CSS中的那些媒体查询会使行显示在屏幕宽度为580px及以下的垂直列中。了解响应式网页设计媒体查询 [ ^ ]。

It is working, see demo at JSFiddle[^]. However, those media queries in your CSS will make the rows appears in vertical column on screen width of 580px and below. Learn Responsive Web Design Media Queries[^].

这篇关于我怎样才能让这个表在HTML中工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！