Css PrimeFaces选项卡视图-调整选项卡宽度

我有一个向左的选项卡视图

我想减少标签标题的宽度，它们太大了。 我该怎么做

<p:tabView orientation="left">
    <div style="width: 5%">
        <p:tab  title="Tab1">
        </p:tab>
        <p:tab title="Tab2">
            <p:dataTable id="dg_Diger"
                value="#{aboneGoruntulemeProvider.digerModel}" var="diger"
                style="margin-bottom:20px">
                <p:column headerText="Kart No">
                  <h:outputText value="#{diger.kartNo}" />
                </p:column>
                <p:column headerText="Alt Limit">
                  <h:outputText value="#{diger.altLimit}" />
                </p:column>
                <p:column headerText="Veriliş Tarihi">
                  <h:outputText value="#{diger.verilisTarihi}" />
                </p:column>
                <p:column headerText="Bitiş Tarihi">
                  <h:outputText value="#{diger.bitisTarihi}" />
                </p:column>
                <p:column headerText="Durum">
                  <h:outputText value="#{diger.durum}" />
                </p:column>
            </p:dataTable>
        </p:tab>
    </div>
</p:tabView>

---

您可以覆盖PrimeFaces提供的CSS

虽然选项卡的默认值为25%，面板的宽度为75%，但您可以将选项卡标题调整为10%，将选项卡的面板调整为90%，这两者加在一起将形成100%

/** tabs **/
.ui-tabs.ui-tabs-left > .ui-tabs-nav {
   width: 10%;
}
/** panels **/
.ui-tabs.ui-tabs-left > .ui-tabs-panels {
   width: 90%;
}

---

您必须确保级联正确。

您可以覆盖PrimeFaces提供的CSS

虽然选项卡的默认值为25%，面板的宽度为75%，但您可以将选项卡标题调整为10%，将选项卡的面板调整为90%，这两者加在一起将形成100%

/** tabs **/
.ui-tabs.ui-tabs-left > .ui-tabs-nav {
   width: 10%;
}
/** panels **/
.ui-tabs.ui-tabs-left > .ui-tabs-panels {
   width: 90%;
}

---

您必须确保级联正确。

它会影响项目的所有选项卡。我们可以将此应用于一个特定的选项卡视图吗？您可以在所需的选项卡上设置一个

styleClass

，并将css class@BuddhikaAriyaratneIt设置为影响项目的所有选项卡视图。我们可以将其仅应用于一个特定的选项卡视图吗？您可以在所需的选项卡上设置一个

styleClass

，并将该css class@BuddhikaAriyaratne作为目标