如何在css中使表格单元边框粘在一起？
我正在为我的学习班做一个小项目。这是一个xml + css页面。在css文件中，我包括表，3xtable-cells和许多表行。我无法弄清楚如何使“桌面细胞边界粘在一起”。你能帮帮我吗？
XML文件：
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE Sklep SYSTEM "Sklep.dtd" >
<?xml-stylesheet type="text/css" href="Sklep.css"?>
<Sklep>
<ListaProduktów>
<Produkt IdProduktu="1111" Kategoria="Napoje" Producent="Cola Company">
<Nazwa>Coca-Cola 2L</Nazwa>
<Kalorie>2000kcal</Kalorie>
</Produkt>
<Produkt IdProduktu="1112" Kategoria="Napoje" Producent="Tymbark">
<Nazwa>Napój jabłkowy 1L</Nazwa>
<Kalorie>1000kcal</Kalorie>
</Produkt>
<Produkt IdProduktu="1113" Kategoria="Nabiał" Producent="Nabiałex">
<Nazwa>Serek wiejski z twarożkiem</Nazwa>
<Kalorie>300kcal</Kalorie>
</Produkt>
<Produkt IdProduktu="1114" Kategoria="Nabiał" Producent="Danone">
<Nazwa>Fantazja truskawkowa</Nazwa>
<Kalorie>200kcal</Kalorie>
</Produkt>
<Produkt IdProduktu="1115" Kategoria="Nabiał" Producent="Serex">
<Nazwa>Ser żółty pół tłusty 1kg</Nazwa>
<Kalorie>4000kcal</Kalorie>
</Produkt>
<Produkt IdProduktu="1116" Kategoria="Alkohol" Producent="Polmos">
<Nazwa>Wódka żytniówka 0,5L</Nazwa>
<Kalorie>500kcal</Kalorie>
</Produkt>
<Produkt IdProduktu="1117" Kategoria="Alkohol" Producent="Jack Daniels">
<Nazwa>Whisky Jack Daniels 1L</Nazwa>
<Kalorie>2000kcal</Kalorie>
</Produkt>
<Produkt IdProduktu="1118" Kategoria="Mięso" Producent="Morliny">
<Nazwa>Parówki śmieszki 5szt.</Nazwa>
<Kalorie>120kcal</Kalorie>
</Produkt>
<Produkt IdProduktu="1119" Kategoria="Mięso" Producent="Wędlinex">
<Nazwa>Wędlina z kurczaka 200g</Nazwa>
<Kalorie>340kcal</Kalorie>
</Produkt>
<Produkt IdProduktu="1120" Kategoria="Mięso" Producent="Schabex">
<Nazwa>Kiełbasa krakowska 400g</Nazwa>
<Kalorie>700kcal</Kalorie>
</Produkt>
<Produkt IdProduktu="1121" Kategoria="Przekąski" Producent="Crunchips">
<Nazwa>Chipsy Crunchips 120g</Nazwa>
<Kalorie>3000kcal</Kalorie>
</Produkt>
<Produkt IdProduktu="1122" Kategoria="Przekąski" Producent="Chrupex">
<Nazwa>Paluszki solone 200g</Nazwa>
<Kalorie>250kcal</Kalorie>
</Produkt>
<Produkt IdProduktu="1123" Kategoria="Słodycze" Producent="Wedel">
<Nazwa>Czekolada Wedel 120g</Nazwa>
<Kalorie>1000kcal</Kalorie>
</Produkt>
<Produkt IdProduktu="1124" Kategoria="Słodycze" Producent="SłodkiMiś">
<Nazwa>Ciastka Kruchy Miś 300g</Nazwa>
<Kalorie>1200kcal</Kalorie>
</Produkt>
</ListaProduktów>
<Klienci>
<Osoba IdOsoby="marcin_kiełbasa">
<Imię>Marcin</Imię>
<Nazwisko>Kiełbasa</Nazwisko>
</Osoba>
<Osoba IdOsoby="ania_wolna">
<Imię>Ania</Imię>
<Nazwisko>Wolna</Nazwisko>
</Osoba>
<Osoba IdOsoby="bill_szybki">
<Imię>Bill</Imię>
<Nazwisko>Szybki</Nazwisko>
</Osoba>
<Osoba IdOsoby="maria_jopek">
<Imię>Maria</Imię>
<Nazwisko>Jopek</Nazwisko>
</Osoba>
<Osoba IdOsoby="wojciech_szczęsny">
<Imię>Wojciech</Imię>
<Nazwisko>Szczęsny</Nazwisko>
</Osoba>
<Osoba IdOsoby="kuba_kasza">
<Imię>Kuba</Imię>
<Nazwisko>Kasza</Nazwisko>
</Osoba>
<Osoba IdOsoby="antoni_macierewicz">
<Imię>Antoni</Imię>
<Nazwisko>Macierewicz</Nazwisko>
</Osoba>
<Osoba IdOsoby="andrzej_duda">
<Imię>Andrzej</Imię>
<Nazwisko>Duda</Nazwisko>
</Osoba>
<Osoba IdOsoby="piotr_marzec">
<Imię>Piotr</Imię>
<Nazwisko>Marzec</Nazwisko>
</Osoba>
<Osoba IdOsoby="kajtek_chudy">
<Imię>Kajtek</Imię>
<Nazwisko>Chudy</Nazwisko>
</Osoba>
<Osoba IdOsoby="tomasz_yamaha">
<Imię>Tomasz</Imię>
<Nazwisko>Yamaha</Nazwisko>
</Osoba>
<Osoba IdOsoby="kamila_słodka">
<Imię>Kamila</Imię>
<Nazwisko>Słodka</Nazwisko>
</Osoba>
<Osoba IdOsoby="michał_cienias">
<Imię>Michał</Imię>
<Nazwisko>Cienias</Nazwisko>
</Osoba>
<Osoba IdOsoby="joanna_krupa">
<Imię>Joanna</Imię>
<Nazwisko>Krupa</Nazwisko>
</Osoba>
<Osoba IdOsoby="jarek_koza">
<Imię>Jarek</Imię>
<Nazwisko>Koza</Nazwisko>
</Osoba>
<Osoba IdOsoby="ola_stodoła">
<Imię>Ola</Imię>
<Nazwisko>Stodoła</Nazwisko>
</Osoba>
<Osoba IdOsoby="ryszard_kozioł">
<Imię>Ryszard</Imię>
<Nazwisko>Kozioł</Nazwisko>
</Osoba>
<Osoba IdOsoby="andrzej_spokojny">
<Imię>Andrzej</Imię>
<Nazwisko>Spokojny</Nazwisko>
</Osoba>
</Klienci>
<ListaZakupów>
<Zakup IdOsoby="marcin_kiełbasa" IdProduktu="1111">
<DataZakupu Dzień="10" Miesiąc="12" Rok="2016" />
<Płatność rodzaj="gotówka"/>
<Wartość Waluta="PLN">5.00</Wartość>
</Zakup>
<Zakup IdOsoby="ania_wolna" IdProduktu="1112">
<DataZakupu Dzień="12" Miesiąc="12" Rok="2016" />
<Płatność rodzaj="gotówka"/>
<Wartość Waluta="PLN">8.00</Wartość>
</Zakup>
<Zakup IdOsoby="andrzej_duda" IdProduktu="1113">
<DataZakupu Dzień="08" Miesiąc="12" Rok="2016" />
<Płatność rodzaj="gotówka"/>
<Wartość Waluta="USD">4.00</Wartość>
</Zakup>
<Zakup IdOsoby="andrzej_spokojny" IdProduktu="1114">
<DataZakupu Dzień="10" Miesiąc="05" Rok="2016" />
<Płatność rodzaj="karta"/>
<Wartość Waluta="PLN">5.00</Wartość>
</Zakup>
<Zakup IdOsoby="joanna_krupa" IdProduktu="1115">
<DataZakupu Dzień="10" Miesiąc="12" Rok="2016" />
<Płatność rodzaj="gotówka"/>
<Wartość Waluta="PLN">15.01</Wartość>
</Zakup>
<Zakup IdOsoby="jarek_koza" IdProduktu="1116">
<DataZakupu Dzień="01" Miesiąc="01" Rok="2016" />
<Płatność rodzaj="karta"/>
<Wartość Waluta="PLN">9.20</Wartość>
</Zakup>
<Zakup IdOsoby="kajtek_chudy" IdProduktu="1117">
<DataZakupu Dzień="17" Miesiąc="04" Rok="2016" />
<Płatność rodzaj="gotówka"/>
<Wartość Waluta="PLN">3.00</Wartość>
</Zakup>
<Zakup IdOsoby="kamila_słodka" IdProduktu="1120">
<DataZakupu Dzień="01" Miesiąc="09" Rok="2016" />
<Płatność rodzaj="karta"/>
<Wartość Waluta="EUR">3.19</Wartość>
</Zakup>
<Zakup IdOsoby="michał_cienias" IdProduktu="1122">
<DataZakupu Dzień="15" Miesiąc="07" Rok="2016" />
<Płatność rodzaj="gotówka"/>
<Wartość Waluta="PLN">10.99</Wartość>
</Zakup>
<Zakup IdOsoby="ola_stodoła" IdProduktu="1123">
<DataZakupu Dzień="22" Miesiąc="11" Rok="2016" />
<Płatność rodzaj="karta"/>
<Wartość Waluta="USD">11.00</Wartość>
</Zakup>
</ListaZakupów>
<Autorzy>
<Autor Indeks="195603">
<Imię>dfgdfgdfg</Imię>
<Nazwisko>dfgdfgdfg</Nazwisko>
</Autor>
<Autor Indeks="195626">
<Imię>dfgdfgdfg</Imię>
<Nazwisko>gdfgdfgdfg</Nazwisko>
</Autor>
</Autorzy>
<Poprawki>
<Poprawka Indeks="195626">
<Data>10-10-2016</Data>
</Poprawka>
</Poprawki>
</Sklep>
CSS文件：
Sklep
{
/*margin: 10px; */
display:table;
background-color: #FFA500;
color: #000000;
font-size: 10pt;
font-family: "Arial";
table-layout: fixed;
border-collapse: collapse;
width:100%;
}
ListaProduktów, Klienci, ListaZakupów
{
display: table-cell;
}
Klienci:before
{
/*margin-left: 5px;*/
display: block;
content: "Klienci";
font-family: Verdana;
background-color: rgb(239, 197, 19);
font-weight: lighter;
font-style: italic;
text-align: center;
font-size: 32px;
/*width:205px;*/
border: 2px solid red;
}
ListaProduktów:before
{
/*margin-left: 5px;*/
display: block;
content: "Produkty";
font-family: Verdana;
background-color: rgb(255, 98, 0);
font-weight: lighter;
font-style: italic;
text-align: center;
font-size: 32px;
/* width:202px;*/
border: 2px solid red;
}
ListaZakupów:before
{
/*margin-left: 5px;*/
display: block;
content: "Zakupy";
font-family: Verdana;
background-color: rgb(183, 82, 19);
font-weight: lighter;
font-style: italic;
text-align: center;
font-size: 32px;
/*width:253px;*/
border: 2px solid red;
}
Produkt
{
display: table-row;
/*height: 80px;
width: 200px;
margin: 5px;
padding-top: 2px;
padding-left: 2px;*/
border: 3px dotted red;
border-radius: 2px;
}
Produkt:hover
{
background-color: rgb(255, 98, 0);
border-style: double;
}
Produkt > Nazwa
{
display: block;
/*height: 25px;*/
font-weight: bold;
/* margin-bottom: 10px;*/
text-align: left;
}
Produkt > Kalorie
{
display:block;
text-align: left;
text-decoration: underline;
}
Kalorie:before
{
content: "kalorie: ";
}
Produkt:after
{
margin-top: 3px;
content: "Producent: " attr(Producent) ", Kategoria: " attr(Kategoria) " ";
font-size: 10px;
}
Osoba
{
display: table-row;
/*height: 80px;
width: 200px;
margin: 5px;
padding-top: 2px;
padding-left: 2px;*/
border: 3px dotted red;
border-radius: 2px;
}
Osoba:after
{
margin-top: auto;
content: "Numer id: " attr(IdOsoby) "";
font-size: 10px;
}
Osoba > Imię
{
display: block;
/* height: 25px;*/
font-weight: bold;
/*margin-bottom: 10px;*/
text-align: left;
}
Osoba > Nazwisko
{
display:block;
text-align: left;
text-decoration: underline;
}
Osoba:hover
{
background-color: rgb(239, 197, 19);
border-style: double;
}
Zakup
{
display: table-row;
/*height: 80px;
width: 250px;
margin: 5px;
padding-top: 2px;
padding-left: 2px;*/
border: 3px dotted red;
border-radius: 2px;
}
Zakup:hover
{
background-color: rgb(183, 82, 19);
border-style: double;
}
Zakup:before
{
display: block;
content: ""attr(IdOsoby)" kupił produkt o id:"attr(IdProduktu)"";
/*padding-top: 2px;
padding-left: 2px;*/
text-align: left;
}
DataZakupu:after
{
content: "w dniu "attr(Dzień)"-"attr(Miesiąc)"-"attr(Rok)"";
text-align: left;
/*padding-top: 2px;
padding-left: 2px;*/
}
Płatność:after
{
content: "używając: "attr(rodzaj)"";
text-align: left;
/*padding-top: 2px;
padding-left: 2px;*/
}
Wartość:before
{
content: "równowartość: "
}
Wartość[Waluta="PLN"]:after
{
content: "PLN";
}
Wartość[Waluta="USD"]:after
{
content: "USD";
}
Wartość[Waluta="EUR"]:after
{
content: "EUR";
}
Autorzy, Poprawki
{
display:table-caption;
color: black;
font-size:10px;
}
Autorzy:before
{
color: black;
font-size:10px;
content: "Autorzy: "
}
Autorzy > Autor:after
{
content: " [ " attr(Indeks) " ] ";
}
Poprawki:before
{
color: black;
font-size:10px;
content: "Ostatnia poprawka: "
}
图片显示了问题：
1 个答案:
答案 0 :(得分：1)
您可以将当前列（ListaProduktów，Klienci，ListaZakupów）包装在表格单元格中并将它们转换为表格。
<Sklep>
<Row>
<Column>
<ListaProduktów> ...
</ListaProduktów>
</Column>
<Column>
<Klienci> ...
</Klienci>
</Column>
<Column>
<ListaZakupów > ...
</ListaZakupów >
</Column>
</Row>
</Sklep>
其中Row为display: table-row;，列为display: table-cell;。 ListaProduktów，Klienci和ListaZakupów应改为display: table; width: 100%;。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？