“ display:block”不适用于Sqaurespace模板(Adirondack)中的移动设备

时间:2018-06-20 10:16:51

标签: css squarespace

我在Squarespace中显示表格时遇到问题。我使用并改编了从此处生成的表:http://russellgoldenberg.github.io/responsive-table-generator/,该表在Sqaurespace模板之外非常有效,并且每一行和每一列都显示为内容块。 但是,一旦我通过代码块将代码复制到sqaurespace中,它就不会以相同的方式起作用,并且会在移动视图中将表内容推离屏幕。

最近两个小时,我一直在尝试查找可能导致此问题的行,但没有运气:/

如果有人可以帮助解决此问题,我将附加下面的代码,

更新: 现在,描述内容已正确显示在页面上,并且位于会话名称下方,但是该表仍然在较小的移动显示器上从屏幕上向右运行。 您可以在此处查看带有表格的页面:https://www.girlsnotbrides2018.org/programme/

<style>
	/* info (hed, dek, source, credit) */
.rg-container {
  font-size: 16px;
  line-height: 1.4;
  margin: 0;
  padding: 1em 0.5em;
  color: #222;
}
.rg-header {
  margin-bottom: 1em;
}

.rg-header > * {
  display: block;
}
.rg-hed {
  font-size: 1.4em;
}
.rg-dek {
  font-size: 1em;
}

.rg-source {
  margin: 0;
  font-size: 0.75em;
  text-align: right;
}
.rg-source .pre-colon {
  text-transform: uppercase;
}

.rg-source .post-colon {
  font-weight: bold;
}

/* table */
table.rg-table {
  width: 100%;
  margin-bottom: 0.5em;
  font-size: 1em;
  border-collapse: collapse;
  border-spacing: 0;
}
table.rg-table tr {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  text-align: left;
  color: #333;
}
table.rg-table thead {
  border-bottom: 3px solid #ddd;
}
table.rg-table tr {
  border-bottom: 1px solid #ddd;
  color: #222;
}
table.rg-table tr.highlight {
  background-color: #dcf1f0 !important;
}
table.rg-table.zebra tr:nth-child(even) {
  background-color: #f6f6f6;
}
table.rg-table th {
  font-weight: bold;
  padding: 0.35em;
  font-size: 0.9em;
}
table.rg-table td {
  padding: 0.35em;
  font-size: 0.9em;
}
table.rg-table .highlight td {
  font-weight: bold;
}


/* media queries */
@media screen and (max-width: 600px) {
  .rg-container {
    max-width: 600px;
    margin: 0 auto;
  }
  table.rg-table {
    width: 100%;
  }
  table.rg-table tbody {
    width: 100%;
  }
  table.rg-table tr,
  table.rg-table th,
  table.rg-table td {
    display: block !important;
    padding: 0;
  }
  table.rg-table tr {
    border-bottom: none;
    margin: 0 0 1em 0;
    padding: 0.5em;
  }
  table.rg-table tr.highlight {
    background-color: inherit !important;
  }
  table.rg-table.zebra tr:nth-child(even) {
    background-color: transparent;
  }
  table.rg-table.zebra td:nth-child(even) {
    background-color: #f6f6f6;
  }
  table.rg-table tr:nth-child(even) {
    background-color: transparent;
  }
  table.rg-table td {
	padding: 0.5em 0 0.25em 0;
	border-bottom: 1px dotted #ccc;
	text-align: left;
    display: block !important;
  }
  table.rg-table td:last-child {
    padding-right: 0;
    border-bottom: 2px solid #ccc;
    display: block !important;
  }
  table.rg-table td:empty {
    display: none;
  }
  table.rg-table .highlight td {
    background-color: inherit;
    font-weight: normal;
  }
}
</style>
<div class='rg-container'>
	<table class='rg-table' summary='Hed'>
		<caption class='rg-header'>
		<div align="center"><h1><span class='rg-hed' style="color:#faa819">Monday 25th June</span></h1></div>
		</caption>
		<thead>
			<tr>
				<th colspan="2" class='text' bgcolor="#FAA819"><div align="center"><span style="color:#ffffff; font-size: 1.6em; font-family: adelle;">9:00 - 10:30</span></div></th>
			</tr>
		</thead>
		<tbody>
			
				<tr bgcolor="#F5F5F5" class=''>
					<td class='text ' data-title='Name'><span style="color:#FAA819; font-size: 1.5em; font-family: adelle;">Plenary: Opening session * **</span></td>
					<td class='text ' data-title='City'><span class="text">Join us as we celebrate the opening of our 2nd Global Meeting and find  out what&rsquo;s in store for the next three days. Learn more about our  exciting programme of sessions and look ahead to the opportunities the  meeting presents for learning, sharing and building on progress to end  child marriage.</span></td>
				</tr>
			<tr>
				<th colspan="2" class='text' bgcolor="#FAA819"><div align="center"><span style="color:#ffffff; font-size: 1.6em; font-family: adelle;">11:00 - 12:30</span></div></th>
			</tr>

				<tr bgcolor="#F5F5F5"  class=''>
					<td class='text ' data-title='Name'><span style="color:#FAA819; font-size: 1.5em; font-family: adelle;">Confronting the tensions between protection and empowerment: The age of marriage vs. age of sexual consent * ** </span></td>
					<td class='text ' data-title='City'> <span class="text">As governments have moved to end child marriage, some have also increased the age at which girls may consent to sex – which can present challenges to girls’ autonomy and to building a more gender-equitable and rights-based world. In this session, participants will be challenged to clarify their own beliefs and values around sex and marriage, while hearing compelling arguments from advocates on both sides of the issue.</span> </td>
				</tr>
                
                <tr class=''>
					<td class='text ' data-title='Name'><span style="color:#FAA819; font-size: 1.5em; font-family: adelle;">This time for Africa: Sustaining the continental momentum in addressing child marriage * </span></td>
					<td class='text ' data-title='City'><span class="text">Africa has made significant strides in addressing child marriage. This session celebrates some of the gains that have been made across the continent, five years after the African Union launched its Campaign To End Child Marriage and provides space for discussion of how we can maintain the momentum. </span> </td>
				</tr>
			

				<tr bgcolor="#F5F5F5"  class=''>
					<td class='text ' data-title='Name'><span style="color:#FAA819; font-size: 1.3em; font-family: adelle;">Working with parliamentarians to end child marriage </span></td>
					<td class='text ' data-title='City'> <span class="text">Parliamentarians are uniquely positioned to shape, advance and implement policies to address child marriage. They are the ones who develop laws and policies, pass budgets, monitor implementation and ensure accountability for both national and international commitments, including SDG 5.3. This session will provide practical recommendations for Girls Not Brides members on how best to engage with parliamentarians to end child marriage. </span></td>
				</tr>
                
                </tbody>
	</table>
</div>

0 个答案:

没有答案