stacked-area-chart 相关问题


当布局更改或数据更改时,如何确保我的 ReactJS Bumbeishvili D3-Org-Chart 正确更新?

我已经在 CodeSandbox 上复制并简化了我的问题,可以在此处查看:https://codesandbox.io/p/sandbox/d3-org-chart-react-function-org-chart-gvfz4l?file=%2Fsrc %2F组件%2F数据...


饼图未使用 Chart 在 React 中渲染

我在使用react-chartjs-2库和Chart.js在React组件中渲染饼图时遇到问题。图表的数据是从 API 获取的,图表预计


脚本无法在我的引导模式中工作

希望这不是一个愚蠢的问题,但我已经没有主意了...... 所以我有这个模式: 1.scala.html 希望这不是一个愚蠢的问题,但我已经没有主意了...... 所以我有这个模式: 1.scala.html <div class="feat" id="cor" data-toggle="tooltip" data-placement="bottom" title="add conference role"><div data-toggle="modal" data-target="#conf-role-menu-modal">Conference Role</div></div> <div class="modal fade" id="conf-role-menu-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body-conf-role-menu"> <script type="text/javascript"> $(function(){ $(".modal-body-conf-role-menu").load("@routes.Application.areaConferenceRole(id,idenv)"); }); </script> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> 使用模态主体中的脚本,我尝试加载此页面: 2.scala.html @(id:String, idenv:String) @Main("Add area") { <form action="@routes.Application.areaPostConferenceRole(id,idenv)" method="POST"> First Name: <input type="text" name="first_name" id="first" class="form-control"> Last Name : <input name="last_name" class="form-control"> <script type="text/javascript"> $( document ).ready(function() { // Handler for .ready() called. $( "#first" ).focus(function() { alert( "Handler for .focus() called." ); }); }); </script> </form> } 页面加载正常。我在我的模态中看到它...... 问题是我的页面 2.scala.html 中的脚本无法运行。我不明白为什么......如果我从我尝试在模态中加载的页面之外尝试它们,它们就会起作用...... $( document ).ready(function(){}); 永远不会在模态中到达,因为加载页面时已经触发了此事件(模态在之后加载...) 尝试直接插入脚本,如下所示: <script type="text/javascript"> $( "#first" ).focus(function() { alert( "Handler for .focus() called." ); }); </script> 当引导模式弹出时,shown.bs.modal事件将被触发。这是例子。 $('#myModal').on('shown.bs.modal', function () { $('#myInput').trigger('focus') }) Full documentation. https://getbootstrap.com/docs/4.0/components/modal/ 试试这个我已经准备好这个功能了 $('#myModal').on('shown.bs.modal', function () { // Your script here }); $(document).on('shown.bs.modal', '#myModal', function () { // Your script here });


.NET MAUI、ios UseSafeArea 不工作 StackLayout、VerticalStackLayout 和 Grid

<?xml version="1.0" encoding="utf-8" ?> <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="Test.Views.Activities.ActivityMapList" xmlns:maps="clr-namespace:Microsoft.Maui.Controls.Maps;assembly=Microsoft.Maui.Controls.Maps" xmlns:sensors="clr-namespace:Microsoft.Maui.Devices.Sensors;assembly=Microsoft.Maui.Essentials" xmlns:ios="clr-namespace:Microsoft.Maui.Controls.PlatformConfiguration.iOSSpecific;assembly=Microsoft.Maui.Controls" ios:Page.UseSafeArea="False" Shell.NavBarIsVisible="False" Style="{StaticResource Key=DefaultPage}"> <ContentPage.Content> <StackLayout> <maps:Map VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"> <x:Arguments> <MapSpan> <x:Arguments> <sensors:Location> <x:Arguments> <x:Double>36.9628066</x:Double> <x:Double>-122.0194722</x:Double> </x:Arguments> </sensors:Location> <x:Double>0.01</x:Double> <x:Double>0.01</x:Double> </x:Arguments> </MapSpan> </x:Arguments> </maps:Map> </StackLayout> </ContentPage.Content> </ContentPage> StackLayout 或 Grid 内的地图控件,iOS 的 SafeArea 为 false,如图所示。 你有什么解决办法吗? 我需要在地图上使用网格或堆栈布局 默认情况下.NET MAUI 将考虑安全区域。所以使用特定于平台的UseSafeArea就是禁用安全区域。目前,将 UseSafeArea 设置为 false 不会改变行为(尽管应该如此),这是一个错误。另请参阅 MAUI github 上的问题:https://github.com/dotnet/maui/issues/5856 您还可以设置 IgnoreSafeArea 属性来实现相同的目的。但是,它不再在 .NET 7 中工作,请参阅以下问题:https://github.com/dotnet/maui/issues/12823 要解决您的问题,您需要将 IgnoreSafeArea="True" 添加到您的 Grid 或 StackLayout 并将 ios:Page.UseSafeArea="False" 添加到您的页面。这应该不是必需的,但这是对我有用的解决方法。 有关在 iOS 上禁用安全区域的文档可以在此处找到:https://learn.microsoft.com/en-us/dotnet/maui/ios/platform-specifics/page-safe-area-layout?view=net-毛伊岛-7.0 您可以设置 Page Padding 值来实现。在OnAppearing方法中,设置页面的safeInsets,如下代码: protected override void OnAppearing() { base.OnAppearing(); DeviceSafeInsetsService d = new DeviceSafeInsetsService(); double topArea = d.GetSafeAreaTop(); double bottomArea = d.GetSafeAreaBottom(); var safeInsets = On<iOS>().SafeAreaInsets(); safeInsets.Top = -topArea; safeInsets.Bottom = -bottomArea; Padding = safeInsets; } 要获取 topArea 和 bottomArea 值,您应该编写平台代码。答案末尾附有有关此内容的更详细教程。 首先你可以在Project文件夹中生成一个新的类文件并将其更改为部分类。生成两个部分方法。 public partial class DeviceSafeInsetsService { public partial double GetSafeAreaTop(); public partial double GetSafeAreaBottom(); } 然后在iOS平台生成部分文件并实现。该文件位于 Project/Platform/iOS 文件夹中,我想提一下的是,该文件是一个部分文件,因此命名空间应与上面的文件相同。生成此文件时,请删除命名空间中的 .Platforms.iOS 后缀。 public partial class DeviceSafeInsetsService { public partial double GetSafeAreaBottom() { if (UIDevice.CurrentDevice.CheckSystemVersion(11, 0)) { UIWindow window = UIApplication.SharedApplication.Delegate.GetWindow(); var bottomPadding = window.SafeAreaInsets.Bottom; return bottomPadding; } return 0; } public partial double GetSafeAreaTop() { if (UIDevice.CurrentDevice.CheckSystemVersion(11, 0)) { UIWindow window = UIApplication.SharedApplication.Delegate.GetWindow(); var TopPadding = window.SafeAreaInsets.Top; return TopPadding; } return 0; } } 更多信息,您可以参考如何在.NET MAUI中编写特定于平台的代码和MauiPlatformCode示例代码 希望它对你有用。


标签错误:渲染时出现 React JSX 样式标签错误

这是我的反应渲染函数 渲染:函数(){ 返回 ( 某事 .rr{ 红色; ...</desc> <question vote="94"> <p>这是我的反应渲染函数</p> <pre><code>render:function(){ return ( &lt;div&gt; &lt;p className=&#34;rr&#34;&gt;something&lt;/p&gt; &lt;style&gt; .rr{ color:red; } &lt;/style&gt; &lt;/div&gt; ) } </code></pre> <p>这给了我这个错误</p> <blockquote> <p>JSX:错误:解析错误:第 22 行:意外的标记:</p> </blockquote> <p>这里出了什么问题? 我可以将完整的普通 CSS 嵌入到 React 组件中吗?</p> </question> <answer tick="false" vote="130"> <p>使用 es6 模板字符串(允许换行)很容易做到。在你的渲染方法中:</p> <pre><code>const css = ` .my-element { background-color: #f00; } ` return ( &lt;div className=&#34;my-element&#34;&gt; &lt;style&gt;{css}&lt;/style&gt; some content &lt;/div&gt; ) </code></pre> <p>至于用例,我正在为一个 div 执行此操作,其中包含一些用于调试的复选框,我希望将其包含在一个文件中,以便稍后轻松删除。</p> </answer> <answer tick="true" vote="73"> <p>JSX 只是 javascript 的一个小扩展,它不是自己完整的模板语言。所以你会像在 javascript 中那样做:</p> <pre><code>return ( &lt;div&gt; &lt;p className=&#34;rr&#34;&gt;something&lt;/p&gt; &lt;style&gt;{&#34;\ .rr{\ color:red;\ }\ &#34;}&lt;/style&gt; &lt;/div&gt; ) </code></pre> <p><a href="http://jsfiddle.net/r6rqz068/" rel="noreferrer">http://jsfiddle.net/r6rqz068/</a></p> <p>但是根本没有充分的理由这样做。</p> </answer> <answer tick="false" vote="30"> <p>内联样式最好直接应用于组件 JSX 模板:</p> <pre><code>return ( &lt;div&gt; &lt;p style={{color: &#34;red&#34;}}&gt;something&lt;/p&gt; &lt;/div&gt; ); </code></pre> <p>演示:<a href="http://jsfiddle.net/chantastic/69z2wepo/329/" rel="noreferrer">http://jsfiddle.net/chantastic/69z2wepo/329/</a></p> <hr/> <p><strong>注意:JSX 不支持 style 属性的 HTML 语法</strong></p> <p>使用驼峰式属性名称声明属性,例如,</p> <pre><code>{ color: &#34;red&#34;, backgroundColor: &#34;white&#34; } </code></pre> <p>进一步阅读此处:<a href="http://facebook.github.io/react/tips/inline-styles.html" rel="noreferrer">http://facebook.github.io/react/tips/inline-styles.html</a></p> </answer> <answer tick="false" vote="20"> <p>这可以通过使用反引号“`”来完成,如下所示</p> <pre><code>return (&lt;div&gt; &lt;p className=&#34;rr&#34;&gt;something&lt;/p&gt; &lt;style&gt;{` .rr{ color:red; } `}&lt;/style&gt; &lt;/div&gt;) </code></pre> </answer> <answer tick="false" vote="10"> <p>“class”是 JavaScript 中的保留字。而是使用“className”。</p> <p>此外,您必须记住您使用的是 JSX,而不是 HTML。我不相信 jsx 会解析你的标签。更好的方法是使用您的样式创建一个对象,然后将其应用为样式(见下文)。</p> <pre><code>var styles = { color:&#34;red&#34;; } return ( &lt;div&gt; &lt;p style={styles}&gt;something&lt;/p&gt; &lt;/div&gt; ) </code></pre> </answer> <answer tick="false" vote="8"> <ol> <li>创建一个函数来处理插入样式标签。</li> <li>将所需的 CSS 添加到字符串变量中。</li> <li><p>将变量添加到 <pre><code>&lt;style&gt;</code></pre> 标记内返回的 JSX。</p> <pre><code>renderPaypalButtonStyle() { let styleCode = &#34;#braintree-paypal-button { margin: 0 auto; }&#34; return ( &lt;style&gt;{ styleCode }&lt;/style&gt; ) } </code></pre></li> </ol> </answer> <answer tick="false" vote="4"> <p>这就是我所做的:</p> <pre><code>render(){ var styleTagStringContent = &#34;.rr {&#34;+ &#34;color:red&#34;+ &#34;}&#34;; return ( &lt;style type=&#34;text/css&#34;&gt; {styleTagStringContent} &lt;/style&gt; ); </code></pre> </answer> <answer tick="false" vote="0"> <p>经过一番摸索和尝试,终于找到了解决方案。 关键是危险的SetInnerHTML。 代码如下:</p> <pre><code> &lt;script src=&#34;https://pie-meister.github.io/PieMeister-with Progress.min.js&#34;&gt;&lt;/script&gt; import React from &#39;react&#39; const style = ` &lt;pie-chart class=&#34;nested&#34; offset=&#34;top&#34;&gt; &lt;style&gt; path { stroke-linecap: round; stroke-width: 90; } [color1] { stroke: #BFBDB2; stroke-width: 50; } [color2] { stroke: #26BDD8; stroke-width: 60; } [color3] { stroke: #824BF1; } [part=&#34;path&#34;]:not([y]) { stroke: #BFBDB2; stroke-width: 60; opacity: 0.4; } &lt;/style&gt; &lt;slice color1 size=&#34;100%&#34; radius=&#34;200&#34;&gt;&lt;!--No label--&gt;&lt;/slice&gt; &lt;slice color1 size=&#34;88%&#34; radius=&#34;200&#34; y=&#34;65&#34;&gt;&lt;tspan&gt; $size&lt;/tspan&gt;&lt;/slice&gt; &lt;slice color2 size=&#34;100%&#34; radius=&#34;100&#34;&gt; &lt;/slice&gt; &lt;slice color2 size=&#34;40%&#34; radius=&#34;100&#34; y=&#34;165&#34;&gt;&lt;tspan&gt; $size&lt;/tspan&gt;&lt;/slice&gt; &lt;slice color3 size=&#34;100%&#34; radius=&#34;0&#34;&gt; &lt;/slice&gt; &lt;slice color3 size=&#34;10%&#34; radius=&#34;0&#34; y=&#34;265&#34;&gt;&lt;tspan&gt; $size&lt;/tspan&gt;&lt;/slice&gt; &lt;/pie-chart&gt;` export default function Styles() { return ( &lt;div dangerouslySetInnerHTML={{__html:style}}/&gt; ) } </code></pre> </answer> <answer tick="false" vote="-3"> <pre><code>import styled from &#39;styled-components; return ( &lt;div&gt; &lt;Test&gt;something&lt;/Test&gt; &lt;/div&gt; ) </code></pre> <p>下一步:</p> <pre><code>const Test = styled.p` color: red `; </code></pre> </answer> </body></html>


在仪表针中设置弹出框(Echarts)

我有这段代码,我尝试将鼠标悬停在第一个仪表针上以获取 .popover({...}) 对象: </sc...</desc> <question vote="0"> <p>我有这段代码,我尝试将鼠标悬停在第一个仪表针上以获取 .popover({...}) 对象:</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code> &lt;head&gt; &lt;script src=&#34;https://code.jquery.com/jquery-3.6.4.min.js&#34;&gt;&lt;/script&gt; &lt;script src=&#34;https://cdnjs.cloudflare.com/ajax/libs/echarts/5.3.0/echarts.min.js&#34;&gt;&lt;/script&gt; &lt;script src=&#34;https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js&#34;&gt;&lt;/script&gt; &lt;link rel=&#34;stylesheet&#34; href=&#34;https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css&#34;&gt; &lt;title&gt;Gauge Chart&lt;/title&gt; &lt;/head&gt; &lt;button id=&#39;btn1&#39;&gt; Let&#39;s &lt;/button&gt; &lt;input id=&#39;slider1&#39; type=&#39;range&#39; value=&#39;34&#39; min=&#39;0&#39; max=&#39;100&#39; step=&#39;.01&#39;&gt; &lt;input id=&#39;slider2&#39; type=&#39;range&#39; value=&#39;89&#39; min=&#39;0&#39; max=&#39;100&#39; step=&#39;.01&#39;&gt; &lt;div id=&#39;chartid1&#39; style=&#39;width:390px; height: 410px;&#39;&gt;&lt;/div&gt; &lt;script&gt; const chart1 = echarts.init(document.getElementById(&#39;chartid1&#39;)); function update1(value1, value2) { option = { series: [{ type: &#39;gauge&#39;, min: 0, max: 100, splitNumber: 10, detail: { fontFamily: &#39;Lato&#39;, fontSize: 14, borderWidth: 1, borderColor: &#39;#020202&#39;, borderRadius: 5, width: 32, height: 20 }, data: [{ value: value1, name: &#39;False&#39;, itemStyle: { color: &#39;#dd4b50&#39; }, title: { offsetCenter: [&#39;-20%&#39;, &#39;20%&#39;] }, detail: { offsetCenter: [&#39;-20%&#39;, &#39;36%&#39;], backgroundColor: &#39;#dd4b50&#39;, color: &#39;#f2f2f2&#39; } }, { value: value2, name: &#39;True&#39;, itemStyle: { color: &#39;#3a9e4b&#39; }, title: { offsetCenter: [&#39;20%&#39;, &#39;20%&#39;] }, detail: { offsetCenter: [&#39;20%&#39;, &#39;36%&#39;], color: &#39;#f2f2f2&#39;, backgroundColor: &#39;#3a9e4b&#39; } } ] }] }; chart1.setOption(option); } function update2() { let value1 = Number($(&#39;#slider1&#39;).val()); let value2 = Number($(&#34;#slider2&#34;).val()); update1(value1, value2); } update2(); document.getElementById(&#39;btn1&#39;).addEventListener(&#39;click&#39;, function() { update2(); }) /// clickable chart1.on(&#39;mouseenter&#39;, {dataIndex:0}, function(params) { $(this).popover({ html: true, sanitize: false, title: &#39;Title &#39;, content: &#39;This a text&#39;, trigger: &#39;hover&#39;, placement: &#39;top&#39;, container: &#39;body&#39; }) }) &lt;/script&gt;</code></pre> </div> </div> <p></p> <p>我需要悬停并获得 .popover。我知道我可以使用 <pre><code>tooltip:{...}</code></pre>,但对于特定情况,我需要配置 .popover。我尝试用 <pre><code>mychart1.on(...</code></pre> 调整上面的代码,但没有成功。我添加了所有代码需求的CDN。</p> </question> <answer tick="false" vote="0"> <p>如果您查看 <a href="https://echarts.apache.org/en/api.html#events.Mouse%20events.mouseover" rel="nofollow noreferrer">文档</a>,该事件称为 <pre><code>mouseover</code></pre>,而不是 <pre><code>mouseenter</code></pre>。 <a href="https://echarts.apache.org/examples/en/editor.html?c=line-simple&code=PYBwLglsB2AEC8sDeAoWsDOBTAThLGAXLANprrLkWxgCeIWxA5AOYCGAri1kwDRUUAthGjEADP2rpBbAB7EAjGIkD0GEABsIYAHIdBAI1yKVU2ABMsYNhA3FUZ9ADMYYAGJthG2swAybMGA-VQoXaDAAZQgAL0ZYBQAWSUcDYBxLHAB1CHMwAAtFZLNU9NwAYWANNOYAYjEAJgaG4MdYEoyAJTZzCA4iWABWIqkAdxz84gBmeuHqPKwIFjywYkaQgF9ZiwC2YjJWh1bYADc2DQ44yaSQ6mhPOKYPDWwWo-0sQQi6DTjDo9gAMaVaqwJg1czmBIGAZiJg3CibeHoSBgH72JEUYBOJzYMBlLDhYykJgAWkaAFI-KCKUwALoYxH_SzWWzo_7oLE4qz4wk4Pakmm8UGTABslNpW2KbABAGsWDhgBxoOYKlU-aDwZDobDJVIgWrak56kajXD_ut4YzHH9HKdznEABwATl16DuggeABUcBdXq13p9vr8Meh9SCwZM2E6sFCzUcra0UWjKOzYJzcTywESSExBdSxOKGa6LFYbHYU-z09yCVn1Tm80xReLi6HgeqwSbjfU_UcDNK5QqlSq27VI9HYwzLSF6dQLeh6esANwoFeCWhlPJsHBgAB0MAAFExBIrsMBjrgqUhzDsAJLKrDyWBiTawJxKgGQA8gLeeDAASgrIFoAwSosB3KoWH3b8cF_P9l3WOCgA" rel="nofollow noreferrer">这里</a>是你的例子:</p> <pre><code>option = { series: [ { type: &#39;gauge&#39;, min: 0, max: 100, splitNumber: 10, detail: { fontFamily: &#39;Lato&#39;, fontSize: 14, borderWidth: 1, borderColor: &#39;#020202&#39;, borderRadius: 5, width: 32, height: 20 }, data: [ { value: 34, name: &#39;False&#39;, itemStyle: { color: &#39;#dd4b50&#39; }, title: { offsetCenter: [&#39;-20%&#39;, &#39;20%&#39;] }, detail: { offsetCenter: [&#39;-20%&#39;, &#39;36%&#39;], backgroundColor: &#39;#dd4b50&#39;, color: &#39;#f2f2f2&#39; } }, { value: 89, name: &#39;True&#39;, itemStyle: { color: &#39;#3a9e4b&#39; }, title: { offsetCenter: [&#39;20%&#39;, &#39;20%&#39;] }, detail: { offsetCenter: [&#39;20%&#39;, &#39;36%&#39;], color: &#39;#f2f2f2&#39;, backgroundColor: &#39;#3a9e4b&#39; } } ] } ] }; myChart.on(&#39;mouseover&#39;, {dataIndex: 0}, function(params) { console.log(params); }); </code></pre> </answer> </body></html>


带有边框半径和粘性标题的 HTML 表格

我有一个 HTML ,带有边框半径和使用位置的粘性标题:sticky,如下所示: https://codepen.io/muhammadrehansaeed/pen/OJpeeKP 但是,当使用 滚动时 我有一个带有 <table> 的 HTML border-radius 和使用 position: sticky 的粘性标题,如下所示: https://codepen.io/muhammadrehansaeed/pen/OJpeeKP 但是,当使用粘性标题滚动时,表格行会伸出粘性标题的圆角所在的位置。请参阅此图片的左上角: 有没有办法可以在使用粘性标题向下滚动时保持圆角,或者在标题变得粘性并从原始位置向下移动时删除粘性标题?理想情况下,我想要一个CSS解决方案。 您可以使用伪元素隐藏边框的某些部分: table thead th:first-child::before, table thead th:last-child::after { width: 1px; height: 5px; background: white; content: ""; display: block; position: absolute; top: 0px; } table thead th:first-child::before { left: -1px; } table thead th:last-child::after { right: -1px; } 正如Ivan建议的那样,似乎使用伪元素来覆盖标题下方不需要的边框是(令人惊讶的)唯一可行的选择。我建议使用伪不仅用于覆盖“外部”区域,而且还用于绘制弧线和填充“内部”区域。可以使用堆叠背景来做到这一点。应用于原始代码: /* § Additions / Changes */ table thead th { position: relative; } /* Pseudos exceeding header boundary by border width; with rectangle covering half circle and rest of height */ table thead th:last-child::after, table thead th:first-child::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(-1 * var(--global-border-width-1)); width: var(--global-border-radius); background-image: linear-gradient(to bottom, transparent var(--global-border-radius), var(--global-title-color) 0), radial-gradient(circle at var(--global-border-radius) var(--global-border-radius), var(--global-title-color) var(--global-border-radius), var(--global-content-background-color) 0); background-position: top left; background-size: var(--global-border-diameter) 100%, var(--global-border-diameter) var(--global-border-diameter); background-repeat: no-repeat; } table thead th:last-child::after { left: auto; right: calc(-1 * var(--global-border-width-1)); background-position: top right; } /* § Declarations and original style */ html { --global-content-background-color: white; --global-title-color: black; --global-background-color: lightblue; --global-border-color: black; --global-border-radius: 20px; --global-border-width-1: 10px; --global-space-fixed-2: 10px; --global-space-fixed-3: 15px; --global-border-diameter: calc(2 * var(--global-border-radius)); background-color: var(--global-content-background-color); } table { color: var(--global-title-color); background-color: var(--global-content-background-color); border-collapse: separate; border-color: var(--global-title-color); border-style: solid; border-radius: var(--global-border-radius); border-width: 0 var(--global-border-width-1) var(--global-border-width-1) var(--global-border-width-1); border-spacing: 0; width: 100%; } table thead { position: sticky; top: 0; z-index: 10; } table thead th { color: var(--global-background-color); background-color: var(--global-title-color); padding: var(--global-space-fixed-2) var(--global-space-fixed-3); vertical-align: bottom; } table tbody td { border-top: var(--global-border-width-1) solid var(--global-border-color); padding: var(--global-space-fixed-2) var(--global-space-fixed-3); vertical-align: top; } table tbody tr:last-child td:first-child { border-bottom-left-radius: var(--global-border-radius); } table tbody tr:last-child td:last-child { border-bottom-right-radius: var(--global-border-radius); } /* § Unrelated / demo */ * { scroll-margin-top: calc(var(--global-space-fixed-2) * 4 + 1rem); /* = height of sticky thead + top padding of cell, provided text in thead does not wrap */ scroll-margin-bottom: 1em; } td { height: 60vh; } td a { float: right } tr:last-child td { vertical-align: bottom; } a[name]:empty::before { content: attr(name); } th:not(#\0):hover::before { background-image: linear-gradient(to bottom, transparent var(--global-border-radius), #0F08 0), radial-gradient(circle at center, #00F8 var(--global-border-radius), #F2F4 0); background-position: top left; background-size: var(--global-border-diameter) 100%, var(--global-border-diameter) var(--global-border-diameter); } <table> <thead> <tr> <th>Fake non-transparent "border-radius"</th> </tr> </thead> <tbody> <tr> <td> <a href="#⬆️" name="⬇️"></a> For fixed header</td> </tr> <tr> <td> <a href="#⬇️" name="⬆️"></a> Using CSS stacked background images in pseudo elements</td> </tr> </tbody> </table> 只需从表格中删除边框,并为表格主体中的第一个和最后一个表格单元格添加左右边框: tbody td:first-child { border-left: 1px solid black; } tbody td:last-child { border-right: 1px solid black; } tbody tr:last-child td{ border-bottom: 1px solid black; } tbody tr:last-child td:first-child { border-bottom-left-radius: 2px; } tbody tr:last-child td:last-child { border-bottom-right-radius: 2px; } 当然是使用适当的缩进、嵌套和变量! 使用许多伪选择器看起来样式相当丑陋,但似乎可以解决您的问题。 有一个更紧凑的解决方案。只需将具有背景颜色的框阴影添加到第一个 < th > 和最后一个 < th > 即可隐藏元素。 在此示例中,在右侧,您可以看到表格行由于边框半径而可见。在左边,我应用了盒子阴影。 盒子阴影:0 -2.1rem 0 .6rem #E5E7EB; 在这里,它是灰色的,以便您可以看到它的工作原理,但您只需使用与背景相同的颜色即可使其完全不可见。 这是最终结果以及我正在使用的代码: th:第一个孩子 { 边界半径:0.75rem 0 0 0; 左边框:.1rem 实心 $color-gray-200; 框阴影:0 -2.1rem 0 .6rem $color-gray-200; } th:最后一个孩子{ 边界半径:0 0.75rem 0 0; 右边框:.1rem 实心 $color-gray-200; 盒子阴影:1rem -2.1rem 0 .6rem $颜色白色; } 可能需要调整框阴影以隐藏基于所选边框半径的行。 不确定你是否熟悉jquery,如果熟悉的话你可以在滚动内容时动态更改 border-top-left-radius: 等于粘性标题的半径,但这对于新手来说有点棘手jquery/JS。 其次,您可以将粘性标题封闭到父级(例如class="parent")),并将父级背景设置为白色,没有边框。并保持粘性标题的边框半径不变。因此,当您滚动内容时将位于该父级下方(例如 class="parent")。为了确保父级出现在该行上方,您可以给出 z-index: 10


© www.soinside.com 2019 - 2024. All rights reserved.